How to toggle a single checkbox on click of a different element?

Question

I'm trying to find a cleaner and simpler way to check and uncheck a checkbox when I click on a div element. This is the code I'm currently using which works for checking, but unchecking isn't working.

http://codepen.io/jimmykup/full/xkoqJ

I understand what I've written could be done in a faster and/or simpler way, but I'm at a loss as to how.

Note: I'm working with a checkbox that is going to be inserted via javascript.

HTML:

<div class="container">

  <input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm"><div class="click-me unchecked">Click here to check the checkbox.</div>

</div>

jQuery:

(function() {

$('.click-me').before('<input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm">');

$(".container .click-me.unchecked").click(function() {
  $(".confirm").prop("checked", true);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

$(".container .click-me.checked").click(function() {
  $(".confirm").prop("checked", false);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

})();

you are trying to bind a click event to an element that doesn't exist when the page is loaded — MrOBrian, Oct 05 '12 at 17:23
I think he means the div is there on page load , not the checkbox — Scott Selby, Oct 05 '12 at 17:26

Blazemonger · Accepted Answer · 2012-10-05T19:52:34.717

The problem is that you're creating a click event handler on document load, but since you're toggling the class of the container, the handler isn't being bound to the div. In other words: at the time the code is loaded, there are no divs with class unchecked, so that event handler isn't bound to anything.

The quick solution is to use event delegation to bind the handler dynamically:

$(".container").on('click','.click-me.unchecked',function() {
    $(".confirm").prop("checked", true);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});
$(".container").on('click','.click-me.checked',function() {
    $(".confirm").prop("checked", false);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});

However, a better approach exists. You can streamline your code immensely by just setting the checkbox's checked property to its own inverse. By doing so you remove the need for delegation and, indeed, the need for checked and unchecked classes entirely (assuming you're not also using them for styling or in some other script):

$(".container").on('click','.click-me',function() {
    $(".confirm").prop("checked", !$(".confirm").prop("checked"));
});

http://jsfiddle.net/mblase75/bNkxG/

score 0 · Answer 2 · edited May 23 '17 at 11:56

$('.click-me').click(function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

from here

you could always try to search google or SO , for "jquery toggle checkbox "

incase this div is not going to be there on document load

$(document).on( 'click' , '.click-me', (function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

it shouldn't matter if the checkbox with class '.confirm' was there on page load, as long as that is there when this click is fired

How to toggle a single checkbox on click of a different element?

2 Answers2