Clicking on a checkbox toggles other checkbox at times

how to get checked and unchecked checkbox value in jquery
check all other checkboxes when one is checked
how to call javascript function when checkbox is checked unchecked
how to uncheck select all checkbox when one checkbox is unchecked
jquery set checkbox checked based on value
button click checkbox checked
html checkbox checked
check checkbox dynamically javascript

So I got 5 checkbox. All below one another. They have been made using svg and polyline. When I click on the label of each checkbox, it toggles the correct one, but when I click on the image of the checkbox, at times it toggles the incorrect box!

.cbx {
  margin: auto;
  margin-top: 2px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098A9;
  transition: all 0.2s ease;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506EEC;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx span:last-child {
  padding-left: 8px;
}
.cbx:hover span:first-child {
  border-color: #506EEC;
}

.inp-cbx:checked + .cbx span:first-child {
  background: #506EEC;
  border-color: #506EEC;
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

The html

<div class="ax-cb-div">
  <input class="inp-cbx" id="1" type="checkbox" style="display: none;"/>
  <label for="1" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 1</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="2" type="checkbox" style="display: none;"/>
  <label for="2" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 2</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="3" type="checkbox" style="display: none;"/>
  <label for="3" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 3</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="4" type="checkbox" style="display: none;"/>
  <label for="4" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 4</span>
  </label>
</div>

Select checkbox 1, 2, 3, 4. Then click on checkbox 3 to uncheck it. Checkbox 4 gets unchecked instead. Upon clicking again on checkbox 3, it gets unchecked.

Link to codepen

because transform: scale(3.5) on check expand it's size and cover other checkbox that's why..

.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(1); // set scale to it's actual size instead of 3.5
  opacity: 0;
  transition: all 0.6s ease;
}

.cbx {
  margin: auto;
  margin-top: 2px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098A9;
  transition: all 0.2s ease;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506EEC;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx span:last-child {
  padding-left: 8px;
}
.cbx:hover span:first-child {
  border-color: #506EEC;
}

.inp-cbx:checked + .cbx span:first-child {
  background: #506EEC;
  border-color: #506EEC;
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
<div class="ax-cb-div">
  <input class="inp-cbx" id="1" type="checkbox" style="display: none;"/>
  <label for="1" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 1</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="2" type="checkbox" style="display: none;"/>
  <label for="2" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 2</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="3" type="checkbox" style="display: none;"/>
  <label for="3" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 3</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="4" type="checkbox" style="display: none;"/>
  <label for="4" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 4</span>
  </label>
</div>

Check all other checkboxes when one is checked, demo � updated_demo. HTML: <label><input type="checkbox" name="sample" class="selectall"/> Select all</label> <div id="checkboxlist"> <label><input� Just started and have a form to make with a lot of questions that contain 3 checkboxes each. As the user can only select one of the boxes for each question and the forms text generated is decided by which boxes they ticked, how can I make it so the ticking of one box immediately unticks the other

Adding pointer-events none to the span seem like working fix

.cbx span {
  pointer-events: none;
}

https://codepen.io/chemicalbr/pen/KEYbgG

The "Checkbox Hack" (and things you can do with it), But just because the checkbox is hidden, clicking the <label> still toggles its value checkbox can be on or off independently of one another, these tabs use radio per group can be on at a time (like how only one tab can be active at a time). In above image, you can see the span:before of 4th checkbox covers the 3rd checkbox. And it's clickable. And it's clickable. That's why when you click on 3rd checkbox, it actually clicks on 4th one.

You can use the value tag.

<input id="1" value="test" ../>
<input id="3" value="test" ../>

MDN Web docs - Input

How to handle HTML checkbox events, The HTML checkbox input element allows you to select a single value for to handle checkbox events in Jquery; How to submit a form when checkbox is clicked is to attach an event to the checkbox so it checks its state each time it's changed other browsers so to avoid all this I recommend you stick to the onclick event. A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. Inverting the state of a checkbox is done by clicking the mouse on the box, or the caption, or by using a keyboard shortcut, such as the space bar. Often, a series of checkboxes is presented, each with a binary choice between two options.

Change transform property value to 1.5

.inp-cbx:checked + .cbx span:first-child:before {
   transform: scale(1.5);
   opacity: 0;
   transition: all 0.6s ease;
}

How to check and uncheck a checkbox with jQuery, removeAttr() instead but this may have other consequences from my reading of Note that Javascript is not required to toggle a checkbox when clicking some� The “tabs” design pattern is just toggling on and off of areas, perfect for the checkbox hack. But instead of checkboxes, in which any checkbox can be on or off independently of one another, these tabs use radio buttons in which only one per group can be on at a time (like how only one tab can be active at a time).

Add pointer-events: none; to .cbx span:first-child:before style. It's the animation that causes the problem.

In .cbx span:first-child:before we are scaling the content:"" from scale(0) and opacity:1 to scale(3.5) and opacity:0 respectively. So actually we are just hiding that object with opacity which means object will be there and clickable. That's why we need to add pointer-events:none to .cbx span:first-child:before style.

To test it, just check the 4th checkbox and inspect it with .inp-cbx:checked + .cbx span:first-child:before style. Change opacity from 0 to opacity:1. You will see something like below.

In above image, you can see the span:before of 4th checkbox covers the 3rd checkbox. And it's clickable. That's why when you click on 3rd checkbox, it actually clicks on 4th one.

See the Snippet below.

.cbx {
  margin: auto;
  margin-top: 2px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098A9;
  transition: all 0.2s ease;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506EEC;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
  pointer-events:none;
}
.cbx span:last-child {
  padding-left: 8px;
}
.cbx:hover span:first-child {
  border-color: #506EEC;
}

.inp-cbx:checked + .cbx span:first-child {
  background: #506EEC;
  border-color: #506EEC;
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
<div class="ax-cb-div">
  <input class="inp-cbx" id="1" type="checkbox" style="display: none;"/>
  <label for="1" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 1</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="2" type="checkbox" style="display: none;"/>
  <label for="2" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 2</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="3" type="checkbox" style="display: none;"/>
  <label for="3" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 3</span>
  </label>
</div>

<div class="ax-cb-div">
  <input class="inp-cbx" id="4" type="checkbox" style="display: none;"/>
  <label for="4" class="cbx"><span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span><span>Checkbox number 4</span>
  </label>
</div>

JavaScript Checkbox, in this tutorial, you will learn how to use JavaScript to check if a checkbox is Next time, when you click the button, it should uncheck all the checkboxes. If you're using "legacy" form field check boxes, you must protect the document for filling forms in order to make them work. When the document isn't protected, single-clicking a form field simply selects it, and double-clicking it opens its Properties dialog (where you can choose Checked or Not Checked, but that's just supposed to be the starting value, not the way you're supposed to use the

Checkbox, A checkbox allows a user to select a value from a small set of options, often binary. 2-3 times a week Toggle. A checkbox can be formatted to show an on or off choice. Subscribe to weekly newsletter true ; // check to see if all other siblings are checked or unchecked $checkbox.each(function() { if( $(this). checkbox('is� I then tried to use jQuery to set it $('#check_all').prop('checked', true);which actually works, but it wont achieve the same effect as your original function, because clicking the button won't change the checked property from true to false. So any suggestions?

Select2 options with checkbox, Inverting the state of a checkbox is done by clicking the mouse on the box, Use this text to check this particular checkbox or change it to a different value as necessary. AJAX Sometimes, you want your web page users to indicate whether Check boxes are controls that can be toggled to indicate whether it's checked or� Can a Photoshop UI checkbox group allow only one checkbox to be selected at a time? For example, if checkbox 1 is checked, checking Checkbox 2 will uncheck Checkbox 1. Checking Checkbox 3 will uncheck Checkbox 2. The behavior would be similar to radio buttons that allow only one radio button on at a time.

Using The HTML Checkbox & Managing The Check State With , Managing checkboxes in HTML, specifically using JavaScript and jQuery the actionable area the user can click or touch to toggle the check state. You want to trigger a real-time response to a change in checked state. Here you have two or more checkboxes with the same name, but different values. I have a DataGrid with a checkbox column. When I click on a checkbox, the DataGrid selects the appropriate row but doesn't change the checkbox, so I have to click the checkbox again to change it. How do I make it so I only have to click once on the checkbox? Thanks in advance, rgames

Comments
  • Will test this out, but I think you may be right! Will accept once I have edited it on my end.
  • Looks like it but won't removing pointer events stop any clicking on that span element?
  • yes it will remove registration of any pointer events on the span but you obviously do not need them on the span but on the label in order to toggle checked state on the input.
  • Yes but the span is within the label, so won't removing the pointer on the span affect a section of the label?
  • No, if the span is over label the click will be absorbed by the label itself.
  • The animation of the checkbox is what I am referring to. I am facing no issues in getting data and list of checkbox using jquery. Click on the codepen link and recreate the problem.
  • Could you explain how does the animation cause the problem? Like why does a click on a checkbox/svg causes the one below it to trigger first?
  • We are just changing the opacity from 1 to 0 and also scaling it from 0 to 3.5. So the object is not visible but its there and clickable. I have added detailed explanation in my answer. Let me know if it helps :)
  • Does that make sense, @VarunAgarwal?