This does not toggle correctly

Question

Why does this not toggle correctly?

$('#violation_form label').click(function() {
    //alert($(this).parent().prev().html());
    var $checkbox = $(this).closest('li').find('input[type="checkbox"]');
    console.log(!$checkbox.attr('checked'));
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

http://jsfiddle.net/SEkTp/2/

there is no `li` in the html - also use .prop() instead of .attr() — Arun P Johny, Mar 31 '14 at 07:32
There's no LI, jQuery is not defined, `prop` is better than `attr` here... Really, why hurry with posting a question THAT much? — raina77ow, Mar 31 '14 at 07:33
My Good sir I beg you to look at the link again. I have corrected the previous deformities — George Newton, Mar 31 '14 at 07:33
@GeorgeNewton because you need to use .prop() insread of .attr() - see the fiddle I posted above — Arun P Johny, Mar 31 '14 at 07:34
This might be offtopic, as I don't know what else you're doing with jQuery, but you don't need it for what it looks like you're doing, and you could just do this http://jsfiddle.net/SEkTp/11/ — SubjectCurio, Mar 31 '14 at 07:36

raina77ow · Accepted Answer · 2014-03-31T07:55:35.513

2

You're misusing <label> element. There's no point doing magic tricks to make clicking it affect the corresponding <input> when you can do it directly. Quoting the docs (MDN):

The HTML <label> Element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the label element, or by using the for attribute. Such a control is called the labeled control of the label element.

So both...

<label><input type="checkbox" />Whatever</label>

... and, more complex, but more flexible:

<input type="checkbox" name="some_checkbox" id="some_checkbox" />
<label for="some_checkbox">Whatever it is</label>

... will work.

Demo.

edited Mar 31 '14 at 07:55

answered Mar 31 '14 at 07:36

raina77ow

103,633
15
192
229

omg yes dis is so much simplerah! – George Newton Mar 31 '14 at 07:39
Didn't realise you could wrap the label around the element and forego the use of `for`, does it reliably work like that? No docs I've looked at have mentioned doing it that way. – SubjectCurio Mar 31 '14 at 07:45
1

@MLeFevre Why, I considered that to be a well-known feature. Just added the quote from MDN, though. ) – raina77ow Mar 31 '14 at 07:56

score 1 · Answer 2 · answered Mar 31 '14 at 07:34

1

There is no li element in the DOM. Also use prop to set checkboxes on/off. Try this:

    $('#violation_form label').click(function() {
    $checkbox = $(this).closest('form').find('input[type="checkbox"]');
    console.log(!$checkbox.attr('checked'));
    $checkbox.prop("checked", !$checkbox.prop("checked"));
});

Working Demo

answered Mar 31 '14 at 07:34

Milind Anantwar

81,290
25
94
125

Why use prop instead of attr? – George Newton Mar 31 '14 at 07:38
@GeorgeNewton: see http://stackoverflow.com/a/5876747/1719752 – Milind Anantwar Mar 31 '14 at 07:43

score 1 · Answer 3 · answered Mar 31 '14 at 07:34

You can use .prop() instead of .attr() to set the checked state of your checkbox:

$checkbox.prop('checked', !$checkbox.prop('checked'));

Final code look like:

$('#violation_form label').click(function () {
    //alert($(this).parent().prev().html());
    var $checkbox = $(this).closest('li').find('input[type="checkbox"]');
    console.log(!$checkbox.prop('checked'));
    $checkbox.prop('checked', !$checkbox.prop('checked'));
});

Updated Fiddle

score 1 · Answer 4 · answered Mar 31 '14 at 07:36

Maybe you want this => http://jsfiddle.net/SEkTp/14/

jQuery('#violation_form label').click(function() {
   // alert("hi");
    //alert($(this).parent().prev().html());
    var checkbox = jQuery(this).find('input[type="checkbox"]');
    console.log(!checkbox.attr('checked'));
    checkbox.attr('checked', !checkbox.attr('checked'));
});

score 1 · Answer 5 · answered Mar 31 '14 at 07:38

1

Check this one, You missed <li> in that structure. Now it's working fine

Demo

answered Mar 31 '14 at 07:38

Ravichandran Jothi

3,028
11
52
82

This does not toggle correctly

5 Answers5