while working on a project (how else do these things come to mind right?
) I was looking for a way to check if a checkbox is checked or not. The issue that I had was that the checkbox was ajax loaded (along with other content) so I needed to check on focus (Edit: I have since started using .change() instead of .focus() since an element can loose focus without changing states). Here’s what I came up with (placing this inside the ajax loaded content, now yes there is other ways of doing this such as using .live() but this method is for the sake of this example):
$('.check_box_class_name').change(function(){
if($(this).is(':checked')){
//do something.
}else{
//do something else.
}
});
by doing this, it allows me to check when ever this element is focused changes it’s state if it’s checked or not. Now, it may not make sense to some thinking that focused elements are checked? false. an example would be clicking the check box while it’s checked (to uncheck it), by doing this you are still focusing the element (though unchecking it). So this is why I do an actual check every time I focus the element. In the past I used .focus() but then later discovered that it is more reliable to use .change() because focus does not care what the actual state of the element is in. .change() is only triggered when there is a change to the element, which is what we are looking for when working with checkboxes.
if you want to check if it’s checked on page load, simply do this:
if($('.check_box_class_name').is(':checked')){
//do something.
}else{
//do something else.
}
You get the idea.
Edit: ok so I was asked for a real example so here it is.
The HTML:
<form> <input type="checkbox" name="some_name" value="1" class="some_class"> <input type="checkbox" name="some_name" value="2" class="some_class"> <input type="checkbox" name="some_name" value="3" class="some_class"> <input type="submit" value="Submit"> <div class="result"></div> </form>
The JS
$(document).ready(function() {
$('.check_box_class_name').change(function(){
var theValue = $(this).val();
if($(this).is(':checked')){
$('.result').html('You have checked the checkbox with the value of: '+theValue);
}else{
$('.result').html('You have unchecked the checkbox with the value of: '+theValue);
}
});
});
[...] the rest here: Use jQuery to check if a checkbox is checked – Jubair Saidi … a-look-around, css, development, jubair-saidi, Web [...]
[...] from: Use jQuery to check if a checkbox is checked – Jubair Saidi … If you enjoyed this article please consider sharing [...]
Thanks for this.
I found that using .change() instead of .focus() worked much better though.
You know funny thing is, I did start using .change() instead of .focus() because an element could loose focus by not it’s state. I just never updated this post
but I’ll update it now while I’m here ;P thanks!!
Thanks.
can u tell me how to implement this into a html page with check box…with an example or somwthing….i m new to webdevelopement and jquery..and this is exactly what i was looking for…..help plzz…..
Ok I updated my post with an example. I hope that helps!