I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.

Đang xem: How to check whether a checkbox is checked in jquery?

For example, if the age checkbox is checked, then I need to show a textbox to enter age, else hide the textbox.

But the following code returns false by default:

How do I successfully query the checked property?

The checked property of a checkbox DOM element will give you the checked state of the element.

Given your existing code, you could therefore do this:

if(document.getElementById(“isAgeSelected”).checked) { $(“#txtAge”).show();} else { $(“#txtAge”).hide();}However, there”s a much prettier way to do this, using toggle:

Use jQuery”s is() function:

if($(“#isAgeSelected”).is(“:checked”)) $(“#txtAge”).show(); // checkedelse $(“#txtAge”).hide(); // unchecked
Using jQuery > 1.6

// traditional attr$(“#checkMeOut”).attr(“checked”); // “checked”https:// new property method$(“#checkMeOut”).prop(“checked”); // trueUsing the new property method:

if($(“#checkMeOut”).prop(“checked”)) { // something when checked} else { // something else when not}
jQuery 1.6+

$(“#isAgeSelected”).prop(“checked”)jQuery 1.5 and below

$(“#isAgeSelected”).attr(“checked”)Any version of jQuery

// Assuming an event handler on a checkboxif (this.checked)All credit goes to Xian.

I am using this and this is working absolutely fine:

$(“#checkkBoxId”).attr(“checked”) ? alert(“Checked”) : alert(“Unchecked”);Note: If the checkbox is checked it will return true otherwise undefined, so better check for the “TRUE” value.

Use:

Planned$(“#planned_checked”).change(function() { if($(this).prop(“checked”)) { alert(“Checked Box Selected”); } else { alert(“Checked Box deselect”); }});
$(“#planned_checked”).change(function() { if($(this).prop(“checked”)) { alert(“Checked Box Selected”); } else { alert(“Checked Box deselect”); } }); Planned
Since jQuery 1.6, the behavior of jQuery.attr() has changed and users are encouraged not to use it to retrieve an element”s checked state. Instead, you should use jQuery.prop():

$(“#txtAge”).toggle( $(“#isAgeSelected”).prop(“checked”) // For checked attribute it returns true/false; // Return value changes with checkbox state);Two other possibilities are:

$(“#txtAge”).get(0).checked$(“#txtAge”).is(“:checked”)
This worked for me:

$get(“isAgeSelected “).checked == trueWhere isAgeSelected is the id of the control.

Also,
karim79″s answer works fine. I am not sure what I missed at the time I tested it.

Note, this is answer uses Microsoft Ajax, not jQuery

If you are using an updated version of jquery, you must go for .prop method to resolve your issue:

$(“#isAgeSelected”).prop(“checked”) will return true if checked and false if unchecked. I confirmed it and I came across this issue earlier. $(“#isAgeSelected”).attr(“checked”) and $(“#isAgeSelected”).is(“checked”) is returning undefined which is not a worthy answer for the situation. So do as given below.

if($(“#isAgeSelected”).prop(“checked”)) { $(“#txtAge”).show();} else { $(“#txtAge”).hide();}Hope it helps :)- Thanks.

Share
Improve this answer
Follow
edited Sep 12 “15 at 16:10
community wiki
2 revsRajesh Omanakuttan
0
Add a comment |
73
Use:

UDBPrasad$(“input#abc”).click(function(){ if($(this).is(“:checked”)) { var checkedOne=$(this).val() alert(checkedOne); // Do some other action }})This can help if you want that the required action has to be done only when you check the box not at the time you remove the check.

Share
Improve this answer
Follow
edited Oct 29 “18 at 10:25
community wiki
3 revs, 3 users 81%UDB
Add a comment |
70
Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!

Ideally, you”d want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it”s done so).

$(“#isAgeSelected”).bind(“change”, function () { if ($(this).is(“:checked”)) $(“#txtAge”).show(); else $(“#txtAge”).hide();});
Share
Improve this answer
Follow
edited Oct 30 “16 at 17:09
community wiki
2 revs, 2 users 75%arviman
0
Add a comment |
61
I believe you could do this:

if ($(“#isAgeSelected :checked”).size() > 0){ $(“#txtAge”).show(); } else { $(“#txtAge”).hide();}
Share
Improve this answer
Follow
answered May 23 “09 at 15:34
community wiki
xenon
1
Add a comment |
61
I decided to post an answer on how to do that exact same thing without jQuery. Just because I”m a rebel.

var ageCheckbox = document.getElementById(“isAgeSelected”);var ageInput = document.getElementById(“txtAge”);// Just because of IE First you get both elements by their ID. Then you assign the checkboxe”s onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately. In that example using the ternary operator.

Here is a fiddle for you to test it.

Xem thêm: Ca Tư Vấn Tình Dục Nhớ Đời Của Bác Sĩ Tình Dục Học, Tư Vấn Sức Khỏe Tình Dục Online Miễn Phí

Addendum

If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline.

elem.style.display = this.checked ? “inline” : “none”;Slower but cross-browser compatible.

Share
Improve this answer
Follow
edited Apr 5 “12 at 15:50
community wiki
Octavian A. Damiean
0
Add a comment |
60
You can try the change event of checkbox to track the :checked state change.

$(“#isAgeSelected”).on(“change”, function() { if ($(“#isAgeSelected”).is(“:checked”)) alert(“checked”); else { alert(“unchecked”); }});
Age is selected
Share
Improve this answer
Follow
edited Sep 23 “20 at 15:39
community wiki
2 revs, 2 users 55%kabirbaidhya
Add a comment |
58
I ran in to the exact same issue. I have an ASP.NET checkbox

In the jQuery code I used the following selector to check if the checkbox was checked or not, and it seems to work like a charm.

if ($(“”.cssChkBox1 input“”).is(“:checked”)){ … } else { … }I”m sure you can also use the ID instead of the CssClass,

if ($(“”#cssChkBox1 input“”).is(“:checked”)){ … } else { … }I hope this helps you.

Share
Improve this answer
Follow
edited May 25 “11 at 10:59
community wiki
Nertim
1
Add a comment |
56
This code will help you

$(“#isAgeSelected”).click(function(){ console.log(this.checked); if(this.checked == true) { $(“#txtAge”).show(); } else { $(“#txtAge”).hide(); }});
Share
Improve this answer
Follow
edited Sep 3 “19 at 4:01
community wiki
5 revs, 2 users 91%sandeep kumar
Add a comment |
53
This works for me:

/* isAgeSelected being id for checkbox */$(“#isAgeSelected”).click(function(){ $(this).is(“:checked”) ? $(“#txtAge”).show() : $(“#txtAge”).hide();});
Share
Improve this answer
Follow
edited Oct 30 “16 at 17:08
community wiki
3 revs, 3 users 60%ashish amatya
Add a comment |
53
There are many ways to check if a checkbox is checked or not:

Way to check using jQuery

if (elem.checked)if ($(elem).prop(“checked”))if ($(elem).is(“:checked”))if ($(elem).attr(“checked”))Check example or also document:

Share
Improve this answer
Follow
edited Oct 30 “16 at 17:30
community wiki
2 revs, 2 users 78%Parth Chavda
Add a comment |
49
This is some different method to do the same thing:

$(document).ready(function (){ $(“#isAgeSelected”).click(function() { // $(“#txtAge”).toggle(this.checked); // Using a pure CSS selector if ($(this.checked)) { alert(“on check 1”); }; // Using jQuery”s is() method if ($(this).is(“:checked”)) { alert(“on checked 2”); }; // // Using jQuery”s filter() method if ($(this).filter(“:checked”)) { alert(“on checked 3”); }; });});
Age is something
Share
Improve this answer
Follow
edited Oct 30 “16 at 17:34
community wiki
2 revs, 2 users 79%Sangeet Shah
Add a comment |
43
Use this:

if ($(“input:checked”).length > 0)The length is greater than zero if the checkbox is checked.

Share
Improve this answer
Follow
edited Jan 16 “17 at 8:51
community wiki
3 revs, 3 users 55%Hamid N K
0
Add a comment |
39
My way of doing this is:

if ( $(“#checkbox:checked”).length ) { alert(“checkbox is checked”);} else { alert(“checkbox is not checked”);}
Share
Improve this answer
Follow
edited Apr 6 “15 at 20:52
community wiki
2 revs, 2 users 80%Dalius I
0
Add a comment |
36
$(selector).attr(“checked”) !== undefinedThis returns true if the input is checked and false if it is not.

Share
Improve this answer
Follow
edited Mar 21 “13 at 11:13
community wiki
fe_lix_
0
Add a comment |
34
$(document).ready(function() { $(“#agecheckbox”).click(function() { if($(this).is(“:checked”)) { $(“#agetextbox”).show(); } else { $(“#agetextbox”).hide(); } });});
Share
Improve this answer
Follow
edited Nov 26 “14 at 15:07
community wiki
3 revs, 2 users 78%Jumper Pot
0
Add a comment |
34
You can use:

if(document.getElementById(“isAgeSelected”).checked) $(“#txtAge”).show(); else $(“#txtAge”).hide();if($(“#isAgeSelected”).is(“:checked”)) $(“#txtAge”).show(); else $(“#txtAge”).hide();Both of them should work.

Share
Improve this answer
Follow
edited Sep 21 “16 at 15:21
community wiki
2 revs, 2 users 97%Muhammad Awais
0
Add a comment |
32
1) If your HTML markup is:

attr used:

$(element).attr(“checked”); // Will give you undefined as initial value of checkbox is not setIf prop is used:

$(element).prop(“checked”); // Will give you false whether or not initial value is set2) If your HTML markup is:

// May be like this also checked=”true”attr used:

$(element).attr(“checked”) // Will return checked whether it is checked=”true”Prop used:

$(element).prop(“checked”) // Will return true whether checked=”checked”
Share
Improve this answer
Follow
edited Oct 30 “16 at 17:25
community wiki
3 revs, 3 users 77%Somnath Kharat
1
Add a comment |
28
This example is for button.

Try the following:

Checkbox 1 Checkbox 2 Checkbox 3 $(“#remove”).attr(“disabled”, “disabled”); $(document).ready(function() { $(“.cb-element”).click(function() { if($(this).prop(“checked”)) { $(“#remove”).attr(“disabled”, false); } else { $(“#remove”).attr(“disabled”, true); } }); $(“.check:button”).click(function(){ var checked = !$(this).data(“checked”); $(“input:checkbox”).prop(“checked”, checked); $(this).data(“checked”, checked); if(checked == true) { $(this).val(“Uncheck All”); $(“#remove”).attr(“disabled”, false); } else if(checked == false) { $(this).val(“Check All”); $(“#remove”).attr(“disabled”, true); }});});
Share
Improve this answer
Follow
edited Jun 2 “16 at 14:17
community wiki
2 revs, 2 users 97%usayee
0
Add a comment |
28
The top answer didn”t do it for me. This did though:

Basically when the element #li_13 is clicked, it checks if the element # agree (which is the checkbox) is checked by using the .attr(“checked”) function. If it is then fadeIn the #saveForm element, and if not fadeOut the saveForm element.

Share
Improve this answer
Follow
edited Oct 30 “16 at 17:12
community wiki
4 revs, 2 users 72%BigHomie
0
Add a comment |
27
I am using this:

$(“#isAgeSelected”).is(“:checked”) ? $(“#txtAge”).show() : $(“#txtAge”).hide();
Share
Improve this answer
Follow
edited Oct 30 “16 at 17:22
community wiki
2 revs, 2 users 71%Nishant
Add a comment |
27
Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

Show TextboxYou can use the following CSS to achieve the desired functionality:

#show_textbox:not(:checked) + input {display:none;}For other scenarios, you may think of appropriate CSS selectors.

Here is a Fiddle to demonstrate this approach.

Xem thêm: Technical Skill Là Gì, (Từ Điển Anh, Định Nghĩa Và Giải Thích Ý Nghĩa

Share
Improve this answer
Follow
edited Oct 30 “16 at 17:32
community wiki
4 revs, 2 users 88%Ormoz
Add a comment |
24
Toggle: 0/1 or else

” $(“#nolunch”).change(function () { if ($(this).is(“:checked”)) { $(“#checklunch”).val(“1”); }; if ($(this).is(“:checked”) == false) { $(“#checklunch”).val(“0”); };});
Share
Improve this answer
Follow
edited May 5 “15 at 8:48
community wiki
2 revs, 2 users 96%user2385302
Add a comment |
1
23 Next
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged javascript jquery html checkbox or ask your own question.

The Overflow Blog
Featured on Meta
Linked
84
Checkbox value is always 'on'
39
get current state of check box jquery
23
Determine if Checkbox is Checked using jQuery
28
jQuery if checkbox is not checked issue
20
Check the value in textbox is selected using jquery
9
checking if a checkbox is checked?
7
jQuery evaluate if checkbox is checked and contains the class true
5
JavaScript – Getting Value from switch
4
Jquery check if select box is selected
2
Bootstrap check if check box is checked or not
See more linked questions
Related
7626
How do JavaScript closures work?
8219
How do I check if an element is hidden in jQuery?
4493
How do I check if an array includes a value in JavaScript?
4374
Setting “checked” for a checkbox with jQuery
7710
How do I redirect to another webpage?
2905
How can I know which radio button is selected via jQuery?
7418
How to check whether a string contains a substring in JavaScript?
1363
Check if checkbox is checked with jQuery
9963
How can I remove a specific item from an array?
Hot Network Questions more hot questions
Question feed
Subscribe to RSS
Question feed To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

*

default
Stack Overflow
Products
Company
Stack Exchange Network
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev2021.11.1.40614

Stack Overflow works best with JavaScript enabled

*

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *