To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
click(function() { var legchecked = $('[id^=leg_rider]'). filter(':checked'); if (! legchecked){ alert("no riders")}; });
One reliable way I use is:
if($("#checkSurfaceEnvironment-1").prop('checked') == true){
//do something
}
If you want to iterate over checked elements use the parent element
$("#parentId").find("checkbox").each(function(){
if ($(this).prop('checked')==true){
//do something
}
});
More info:
This works well because all checkboxes have a property checked which stores the actual state of the checkbox. If you wish you can inspect the page and try to check and uncheck a checkbox, and you will notice the attribute "checked" (if present) will remain the same. This attribute only represents the initial state of the checkbox, and not the current state. The current state is stored in the property checked of the dom element for that checkbox.
See Properties and Attributes in HTML
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
// do something if the checkbox is NOT checked
}
You can also use either jQuery .not()
method or :not()
selector:
if ($('#checkSurfaceEnvironment').not(':checked').length) {
// do stuff for not selected
}
JSFiddle Example
From the jQuery API documentation for the :not()
selector:
The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.
An alternative way:
Here is a working example and here is the code, you should also use prop.
$('input[type="checkbox"]').mouseenter(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
alert("is checked");
} else {
//$(this).prop('checked',true);
alert("not checked");
}
});
I commented out the way to toggle the checked attribute.
I think the easiest way (with jQuery) to check if checkbox is checked or NOT is:
if 'checked':
if ($(this).is(':checked')) {
// I'm checked let's do something
}
if NOT 'checked':
if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With