0

This is the html:

<div class="btn btn-stock-report" id="superman">
    Superman <input type="checkbox" name="superman" />
</div>

this is the JQuery:

$('#superman').on('click', function () {
    if ($(this).children('input:checkbox:first').is(':checked')) {
        superman = true;
        $(this).children('input:checkbox:first').removeAttr('checked');
    }
    else {
        superman = false;
        $(this).children('input:checkbox:first').attr('checked', 'checked');
    }
    console.log("superman: " + superman);
});

What I'm trying to achieve it simply change the state of the child checkbox and change the value of a superman variable, but for some reason it always prints out superman: false in the console log. Even when I manually check the checkbox and click the div, even though the checkbox is now checked, it reports superman: false

What could be causing this?

Toza
  • 1,348
  • 2
  • 14
  • 35
  • 1
    `checked` is a property and should be set using `prop('checked',true)` – Jamiec Sep 16 '15 at 13:53
  • 1
    Have a look at the `prop` method in JQuery: http://api.jquery.com/prop/ Also have a look at this question: http://stackoverflow.com/questions/5874652/prop-vs-attr for an in-depth discussion of the difference between the two. – xDaevax Sep 16 '15 at 13:53
  • You are reimplementing what the browser already does. Why don't you just use a ` – Sverri M. Olsen Sep 16 '15 at 13:56

3 Answers3

5

You could just change the <div> to <label> and get rid of all the jQuery code and it will just work.

jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • I completely forgot the labels change the state of the checkbox. I'll try that bit now – Toza Sep 16 '15 at 13:56
  • You responded too quickly! ;) I have to wait another 5 minutes to accept an answer. – Toza Sep 16 '15 at 14:00
3

You should use .prop() instead of attr as checked is property of checkboxes. also you can narrow down your code to:

$('#superman').on('click', function () {
 var chk = $(this).find('input:checkbox:first')
 chk.prop("checked", !chk.prop("checked"));
});

Working Demo

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • Thing is - I already tried that one, but it didn't work for some reason. – Toza Sep 16 '15 at 13:55
  • I know, I know, I don't know if it's one of the external libraries or something, I'm not saying it doesn't work at all, I'm just saying it didn't work for me. That's why I came here - to see if there are any other solutions I could take. – Toza Sep 16 '15 at 13:59
  • @NemanjaT: can only help if you could reproduce the problem in fiddle/codepen – Milind Anantwar Sep 16 '15 at 14:01
0
$('#superman').on('click', function () {
    superman = !$(this).children('input:checkbox:first').is(':checked');
    $(this).children('input:checkbox:first').prop('checked',superman);
    console.log("superman: " + superman);
});
AdityaParab
  • 7,024
  • 3
  • 27
  • 40
  • Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – SuperBiasedMan Sep 16 '15 at 15:39