outdoor checkboxes indicate completion

Whenever I click on the email address example [email protected], my first checkbox gets checked inexplicably... I have created a fiddle to demonstrate this issue...

http://jsfiddle.net/pZ8jY/

<table class="checkboxes">
   <tr>
    <td >
    <label for="CheckBoxOne"><input id="CheckBoxOne" type="checkbox"  value=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9a8b9d9aae838f8782c08d8183">[email protected]</a> " />
        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d606c6461236e6260">[email protected]</a> </span></label></td>

          <td >
    <label for="CheckBoxOne"><input id="CheckBoxOne" type="checkbox"  value=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="374352444305775a565e5b1954585a">[email protected]</a> " />
        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadecfd9de98eac7cbc3c684c9c5c7">[email protected]</a> </span></label></td>
  </tr>
</table>

CSS

.checkboxes label
{ 
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;

}

.checkboxes input
{ 
    vertical-align: middle;
}

.checkboxes label span
{
    vertical-align: middle;

}
htmlcss

Answer №1

Each identifier should be distinct.

<input id="CheckBoxTwo" type="checkbox"  value=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="036766609283457477663b7c46401d">[email protected]</a> " />

Answer №2

Avoid using the same id multiple times. For unique checkboxes, be sure to assign different Id's. Labels function in a way that when you click on the text within the label, The action is applied to the corresponding input field. In your current code, both labels are pointing to the same id. Clicking on "test" and "test2" will affect the first visible input element with the id "CheckboxOne" in the source code, causing it to only check the first checkbox.

Furthermore, if you plan to submit this form data, remember to use the attribute "name" instead of id.

Answer №3

Consider repositioning the checkboxes outside the label and providing distinct ids

<table class="checkboxes">
  <tr>
    <td >
      <label for="CheckBoxOne"><span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f581908681b598949c99db969a98">[email protected]</a> </span></label>
      <input id="CheckBoxOne" type="checkbox"  value=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabeafb9be8aa7aba3a6e4a9a5a7">[email protected]</a> " />
    </td>
    <td >
      <label for="CheckBoxOne2"><span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8dcbb994989095d79a962a97969692fd94">[email protected]</a> </span></label>
      <input id="CheckBoxOne2" type="checkbox"  value=" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4e5f494e087a575b535614595557">[email protected]</a> " />
    </td>
 </tr>

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

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

I have been working on displaying static content in a div using Bootstrap vertical tabs, similar to this: Link: However, I am facing an issue with showing dynamic content in a div using a Bootstrap vertical tab through a PHP click event. I have been try ...

phpjqueryhtmlcsstwitter-bootstrap

Is it possible to switch between Jquery and CSS?

Using PHP, I have created a CSS file that enables me to easily adjust the color of various elements. Is there a way for me to regenerate the stylesheet and apply it to the DOM using JQuery? For example: <?php if (isset($_POST['mycolor'])){ $ ...

phpjquerycss

Animating a div using a changing scope variable in AngularJS

As a newcomer to Angular, I am looking to add animation to a div element using ng-click within an ng-repeat loop. Here is what I have attempted: app.js var app = angular.module( 'app', [] ); app.controller('appController', function($ ...

javascripthtmlcssangularjs

Experience real-time updates for CSS gradients

It may seem minor, but I am looking for a solution if possible. I have a webpage where I want to implement a CSS gradient as the background. The page has a fixed header at the top with content scrolling behind it, and I want the background gradient to cont ...

htmlcss

Pressing the button on the form has no effect

I am testing a login screen using NodeJS, but I am facing an issue where the submit button does not redirect to the dashboard screen as intended. What could be missing in the code? The submit button should direct to the dashboard screen that I have created ...

javascripthtmlnode.js

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

javascripthtmlangularjsjson

Resetting the countdown timer is triggered when moving to a new page

In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...

javascripthtml

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

What is the best way to set the width of a nextjs Image using CSS styles

Do you think it's more beneficial to use 'next/image' rather than the traditional img tag? If so, why? I am trying to display an image by specifying width and height in styles using a class called 'img', like this... <img class ...

htmlcssnext.jsnextjs-image

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

css

Is nesting possible with the &:extend function in LessCss?

I've recently been exploring the Less &:extend feature. My goal is to nest multiple extends - essentially extending a class that itself extends another class. However, after testing it out, I'm not sure if it's working as expected. It ...

cssless

Issues arise with animated content when viewed on browsers other than Chrome

After coding some jQuery, I noticed that the animation is working properly in Chrome but not in IE (version 11.0) or Firefox (32.0.3). Additionally, I found that if I omit 'opacity: 1;' from my animation class, the element will revert back to it ...

jqueryhtmlcssanimation

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

I'm trying to create a trapezoid button using CSS. Here is the intended look: However, my current implementation looks like this: The button appears fine but there seems to be some excess space below it. It's almost like an unwanted margin, ev ...

cssvue.jsuser-interfacesass

Updating dynamic content in IBM Worklight V6.1 with jQuery Mobile v1.4.3 requires waiting for the DOM to load

I need to dynamically update the content of a div within my HTML page structure. <!DOCTYPE HTML> <html> ... <body> <div data-role="page"> <div data-role="header"> //Image </div> <!-- Th ...

javascriptjqueryhtmlibm-mobilefirst

Revamp the HTML table with JavaScript headers

I imported data from a CSV file into an HTML table and here is how it appears: <div id="myTable" style="-ms-overflow-x: auto;"> <table> <tbody> <tr class="rownum-0"> <td>Make</td> ...

javascriptjqueryhtmlcsv

Arrange the DIVs in the identical spot and switch them back and forth

I'm struggling with a dilemma involving two DIVs. I am looking to have two DIVs positioned in the exact same spot on the page and toggle between them. When one div disappears, the other should appear using jQuery toggle(). The challenge lies in havi ...

csshtmlpositioning

Struggling with Internet Explorer?

My script is working perfectly on all browsers except for Internet Explorer. The script refreshes the page to display a chat, but it seems to be causing issues in IE. Do you have any suggestions on how to make this work specifically for Internet Explorer? ...

phpjqueryhtmlajax

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. to <Dropdown placeholder='Name' selection search options={names} className=&a ...

javascripthtmlcssreactjssemantic-ui-react

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss