This tutorial covers several methods that will check if the checkbox is checked. All methods do the same thing, but the methods vary depending on the jQuery version you use.
Let’s consider the following example and see how to test checkbox checked using different versions of jQuery:
<input id=
"checkbox"
type="checkbox"
name="one"
value="1"
checked="checked"
>
<input id=
"checkbox2"
type="checkbox"
name="two"
value="2"
>
<input id=
"checkbox3"
type="checkbox"
name="thr"
value="3"
>Tóm Tắt
jQuery 1.6 or newer
To check the checkbox property of an element, the prop() method is recommended:
$('#checkbox').prop('checked'); // Boolean trueExample:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://code.jquery.com/jquery-3.5.0.min.js"
></
script
>
</
head
>
<
body
>
<
input
id
="checkbox1"
type
="checkbox"
name
="one"
value
="1"
>
<
input
id
="checkbox2"
type
="checkbox"
name
="two"
value
="2"
>
<
input
id
="checkbox3"
type
="checkbox"
name
="thr"
value
="3"
>
<
script
>
$(
document
).ready(function
() {
$('input[type="checkbox"]'
).click(function
() {
if
($(this
).prop("checked"
) == true
) {
alert("Checkbox is checked."
);
}
else
if
($(this
).prop("checked"
) == false
) {
alert("Checkbox is unchecked."
);
}
});
});
</
script
>
</
body
>
</
html
>Try it Yourself »
The second is the is() method, which makes code more readable (e.g. in if statements):
$('#checkbox').is(':checked'); // Boolean trueExample:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://code.jquery.com/jquery-3.5.0.min.js"
></
script
>
</
head
>
<
body
>
<
input
id
="checkbox1"
type
="checkbox"
name
="one"
value
="1"
>
<
input
id
="checkbox2"
type
="checkbox"
name
="two"
value
="2"
>
<
input
id
="checkbox3"
type
="checkbox"
name
="thr"
value
="3"
>
<
script
>
$(
document
).ready(function
() {
$('input[type="checkbox"]'
).click(function
() {
if
($(this
).is(":checked"
)) {
alert("Checkbox is checked."
);
}
else
if
($(this
).is(":not(:checked)"
)) {
alert("Checkbox is unchecked."
);
}
});
});
</
script
>
</
body
>
</
html
>Try it Yourself »
The third one uses the length() and size() methods:
$('#checkbox:checked').length; // Integer >0
$('#checkbox:checked').size(); // .size() can be used instead of .lengthExample:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://code.jquery.com/jquery-3.5.0.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
="checkList"
>
<
input
id
="checkbox1"
type
="checkbox"
name
="one"
value
="1"
/>
<
input
id
="checkbox2"
type
="checkbox"
name
="two"
value
="2"
/>
<
input
id
="checkbox3"
type
="checkbox"
name
="thr"
value
="3"
/>
</
div
>
<
input
type
="button"
id
="btnCheck"
value
="Check"
/>
<
script
type
="text/javascript"
>
$(
function
() {
$("#btnCheck"
).click(function
() {
let
checked = $("#checkList input[type=checkbox]:checked"
)
.length;
if
(checked > 0
) {
alert(checked + " CheckBoxe(s) are checked."
);
return
true
;
} else
{
alert("Please select CheckBoxe(s)."
);
return
false
;
}
});
});
</
script
>
</
body
>
</
html
>Try it Yourself »
The fourth method is to get DOM object reference:
$('#checkbox').get(0).checked; // Boolean true
$('#checkbox')[0].checked; // Boolean trueExample:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://code.jquery.com/jquery-3.5.0.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
="checkList"
>
<
input
id
="checkbox1"
type
="checkbox"
name
="one"
value
="1"
/>
</
div
>
<
input
type
="button"
id
="btnCheck"
value
="Check"
/>
<
input
type
="button"
id
="btnUnCheck"
value
="UnCheck"
/>
<
script
>
$(
'#btnCheck'
).on('click'
, function
() {
$('#checkbox1'
).get(0
).checked = true
;
});
$('#btnUnCheck'
).on('click'
, function
() {
$('#checkbox1'
).get(0
).checked = false
;
});
</
script
>
</
body
>
</
html
>Try it Yourself »
Example:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://code.jquery.com/jquery-3.5.0.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
="checkList"
>
<
input
id
="checkbox1"
type
="checkbox"
name
="one"
value
="1"
/>
<
input
id
="checkbox2"
type
="checkbox"
name
="two"
value
="2"
/>
<
input
id
="checkbox3"
type
="checkbox"
name
="thr"
value
="3"
/>
</
div
>
<
input
type
="button"
id
="btnCheck"
value
="Check"
/>
<
input
type
="button"
id
="btnUnCheck"
value
="UnCheck"
/>
<
script
>
$(
'#btnCheck'
).on('click'
, function
() {
$('input'
)[0
].checked = true
;
});
$('#btnUnCheck'
).on('click'
, function
() {
$('input'
)[0
].checked = false
;
});
</
script
>
</
body
>
</
html
>Try it Yourself »
Versions under 1.6
In the cases of versions up to 1.5, you should use .attr() method instead of prop():
$('#checkbox').attr('checked'); // Boolean trueExample:
<
html
>
<
head
>
<
title
>Title of the Document</
title
>
<
script
src
="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
></
script
>
</
head
>
<
body
>
<
input
type
="checkbox"
id
="checkbox"
checked
="checked"
/>
<
div
id
="mydiv"
>
<
input
type
="checkbox"
id
="Uncheckbox"
/>
</
div
>
<
script
>
$(
"#checkbox"
).attr("checked"
) ? alert("Checked"
) : alert("Unchecked"
);
$("#Uncheckbox"
).attr("checked"
) ? alert("Checked"
) : alert("Unchecked"
);
</
script
>
</
body
>
</
html
>Try it Yourself »
The three other methods used for version 1.6 can also be used for versions under 1.6.
Attributes vs Properties
The prop() method provides a way to get property values for jQuery 1.6 versions, while the attr() method retrieves the values of attributes. The checked is a boolean attribute meaning that the corresponding property is true if the attribute is present, even if the attribute has no value or is set to empty string value or “false”. The checked attribute value doesn’t change with the state of the checkbox, whereas the checked property changes.
