CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
klone
klone

Reputation: 2075

Uncheck an html checkbox with for label

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.

Upvotes: 1

Views: 2926

Answers (4)

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

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/

Upvotes: 1

Terry Kernan
Terry Kernan

Reputation: 806

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

Upvotes: 0

Swathi
Swathi

Reputation: 323

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');
}
});

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

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.

Upvotes: 0

Related Questions