The CSS rule for the Checkbox Input column is consistently implemented on the element located in the top row

Does anyone have experience working with a table containing checkboxes like the one demonstrated here? I am encountering an issue where toggling the checked property of any input on any row always affects the element in the first row.

Upon further investigation, it seems that the CSS rules 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

are consistently being applied to row-1.

One potential solution could involve adding a rule for each individual row:

#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}

#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }

However, maintaining this approach becomes challenging as the number of rows is not fixed and is determined during run-time.

Any suggestions on how to solve this issue without resorting to individual rules for each row?

htmlcsscss-selectorshtml-table

Answer №1

It is important that each input has a unique id and a corresponding label for="that id". For example:

<input type="checkbox" id="E1"><label for="E1">...</label>
<input type="checkbox" id="E2"><label for="E2">...</label>

Check out the updated demo here: https://jsfiddle.net/L7y0gzd2/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

htmlcss

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

In my Ionic app, I have a long text page with 2 buttons that trigger the actions scrollToBottom and scrollToTop. Due to the length of the page, I have set the scroll duration to be 30 seconds. I am facing two issues here: How can I stop the scrolling ...

javascriptcssangularionic-framework

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

Uploading a file using AngularJs

When it comes to uploading an image or file using HTML tag in AngularJS, it seems that the tag is not supported. The solution? Create a custom directive. In my index.html page, I included the following code: <body ng-controller="myController"> ...

javascripthtmlangularjsfile-upload

Javascript - Button animation malfunctioning after first click

One issue I'm facing is with an animation that is triggered using the onmousedown event. Another function is supposed to stop the animation when onmouseup is detected. The problem arises after the first time it works correctly. Subsequent attempts to ...

javascripthtmlcssanimation

The styling for buttons links is malfunctioning

I am currently developing my own version of Bootstrap and focusing on buttons and links. I have anchor tags within the button element, but the link styling is not displaying correctly. HTML <button class="btn-danger"><a href="#">Danger</a& ...

htmlcss

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

Hello everyone, I need help solving an issue with my responsive HTML website. It works perfectly on a desktop browser, but when viewed on a mobile device, it gets stuck and won't scroll. Any suggestions on what might be causing this problem? Thank you ...

htmlcssweb

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

c#htmlcsstwitter-bootstrapasp.net-core-mvc

Resolution for Reflected Diagonal Backdrop Design

Encountering a bug in Firefox with my mirrored diagonal background pattern. A vertical line appearing between left and right positioned elements at certain screen widths. Seeking a CSS solution or hack, no linked image files allowed. .stripes-background ...

cssbackground-imagerepeating-linear-gradient

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

javascripthtmlcssvue.js

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

phphtml

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

htmlcss

Date Selector Tool for Input Field

Does anyone know how to change the color of the date picker that appears in certain browsers but is unsure about the selector's name? HTML: <form action="pledge.html" method="post"> <input type="date" id="birthday" name="user_bda ...

css

Interacting with a button element using Selenium automation

I've been working on automating the job application process on the Indeed website using Selenium. However, I've encountered an issue where I am unable to select the 'Continue' button to move to the next page. Despite trying XPath, CSS ...

pythonseleniumxpathcss-selectorswebdriverwait

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

csscss-float

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

htmlcsscss-variables

Reasons for dividing by 1 in JavaScript

While completing a basic programming assignment from my teacher, I encountered an interesting issue in Javascript. I found that when dividing a number by 1, it returns an unexpected value. Can anyone provide an explanation for this? I have created a jsfidd ...

javascripthtmlmath