Uncheck an html checkbox with for label

Question

I am using the following html to display a checkbox with an image:

<div class="testClass">
<input id="111" name="compare_checkbox" type="checkbox" />                      
<label for="111">
    <i class="icon" aria-hidden="true"></i> <b>Compare</b>
</label>
</div>

I need to uncheck the checkbox in certain conditions. I am using the following jquery : $('#111')[0].checked = false;

This works fine if I don't have the label. When I have the label, I don't get any errors in console (either Chrome or Firefox), but the checkbox does not uncheck.

http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Dom, Sep 17 '13 at 22:14

score 1 · Answer 1 · edited May 23 '17 at 10:31

Just letting you know that you cannot have numbers leading your element ID. Please see Element ID in HTML Document ~ Naming Question. Hope this is helpful to you :)

Solution:

<div class="testClass">
<input id="one" name="compare_checkbox" type="checkbox" />                      
<label for="one">
    <i class="icon" aria-hidden="true"></i> <b>Compare</b>
</label>
</div>

http://jsfiddle.net/tLsK7/

score 0 · Answer 2 · answered Sep 17 '13 at 21:57

0

Checkbox states are best handled cross-browser with jQuery's prop function, regardless of whether or not the checkbox has an associated <label>.

$('#element').prop("checked", true); // Checks a checkbox.
$('#element').prop("checked", false); // Unchecks a checkbox.

answered Sep 17 '13 at 21:57

theftprevention

5,083
3
18
31

There must be something else in your JavaScript preventing it from working, because it works with the label present [**in this fiddle.**](http://jsfiddle.net/vjHXT/1/) – theftprevention Sep 17 '13 at 22:16
2

Also, keep in mind that, according to everything below HTML5, `'111'` **is not a valid ID** for an element. Unless you're using HTML5, the ID must start with a letter. – theftprevention Sep 17 '13 at 22:17

score 0 · Answer 3 · answered Sep 17 '13 at 22:24

working fine with for='111'

Here it is http://jsfiddle.net/spaipalle/umAsw/3/

$('#111').click(function(){
if($('#111').is(":checked")){
        alert('checked');
        $('#111')[0].checked = false; // uncheck it
}else{
        alert('unchecked');
}
});

score 0 · Answer 4 · answered Sep 17 '13 at 23:50

0

have you tried changing the id of the element? I don't think ID's can be made up of just numbers, or at least they can't start with a number

answered Sep 17 '13 at 23:50

Terry Kernan

746
5
12

Uncheck an html checkbox with for label

4 Answers4