标签云

微信群

扫码加入我们

WeChat QR Code

如何检查是否一个复选框被选中在jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using 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:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}}

How do I successfully query the checked property?


Check some other ways to do this using jQuery here stackoverflow.com/a/22019103/1868660

2018年05月23日38分53秒

$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); });

2018年05月23日38分53秒

$('#isAgeSelected') returns collection, replace it with: $('#isAgeSelected')[0].checked

2018年05月23日38分53秒

why not $('#isAgeSelected').checked

2018年05月23日38分53秒

Since jQuery selectors return array, you can use $('#isAgeSelected')[0].checked

2018年05月23日38分53秒

i have tried the above condition too, but it returns false only

2018年05月23日38分53秒

$("#txtAge").toggle(this.checked); Does exactly the same as $("#txtAge").toggle(). So, if for some reason the state is checked and the next div is hidden (you clicked back button in your browser) - it won't work as expected.

2018年05月23日38分53秒

Chiramisu - If you had read the answer all the way down, you would have noticed that my edit does not use the is(':checked') business.

2018年05月23日38分53秒

to set: $("#chkmyElement")[0].checked = true; to get: if($("#chkmyElement")[0].checked)

2018年05月23日38分53秒

This is not an answer to the question. this.checked is not jQuery, as the OP asked for. Also, it only works when user clicks on the checkbox, which is not part of the question. The question is, again, How to check whether a checkbox is checked in jQuery? at any given time with or without clicking the checkbox and in jQuery.

2018年05月23日38分53秒

If you don't need duration, easing etc., you can use $("#txtAge").toggle($("#isAgeSelected").is(':checked'))

2018年05月24日38分53秒

+1 there are different ways to get checked property. Some are listed here

2018年05月23日38分53秒

NickG Actually jQuery does have a :visible selector

2018年05月23日38分53秒

hvdd I know - I said "property", not selector.

2018年05月23日38分53秒

NickG ...I don't understand what you mean. jQuery has no .visible "property" (property? you mean method?) because the no HTML element has a visible property. They have a display style property and it's a bit more complex than on/off.

2018年05月23日38分53秒

I would like to know why this is Not the answer ... if you are using jquery at all, then the .prop method is the designed way to check props. .. ... If you are going to do the .is(":checked") approach, that's fine, but it is not the designed way to do it using jquery. right?

2018年05月23日38分53秒

dsdsdsdsd presumably because it needs yet another backwards compatibility step (I'm facing the same issue right now).

2018年05月23日38分53秒

.is(":checked") and .prop("checked") are both valid ways to get the same result in jQuery, .is will work in all versions, .prop requires 1.6+

2018年05月23日38分53秒

If you use .attr('checked') in jQuery 1.11.3, you get undefined, where if you use .prop('checked'), you'll get true/false. I do not see why they changed it to work this way when older browsers cannot support the later jQuery versions that introduced .prop() and therefore need .attr(). The only saving grace is that the older browsers (i.e. IE 8) cannot support anything > jQuery 1.9. Hopefully they did not do this (make .attr('checked') = undefined) in that version! Fortunately, there is always this.checked.

2018年05月24日38分53秒

Technically, this.checked is using straight Javascript. But I love that cross-jQuery-version answer!

2018年05月23日38分53秒

This works because $("#checkkBoxId").attr("checked") returns "checked" or "" (empty string). And an empty string is falsy, non-empty string is truthy, see about truthy/falsy values docs.nodejitsu.com/articles/javascript-conventions/…

2018年05月23日38分53秒

By jquery 2.1.x it returns always checked if it is checked by default... I don't know whether this behavior is intentional, but it surely does not work ( I guess it is a bug )... The val() does not work either, it stays "on". The prop() is working properly and the dom.checked works either.

2018年05月23日38分53秒

And the problem comes when you have to support older browsers with .attr()! If only they just left well enough alone.... Found another answer on here said you can just use this.checked for a cross-jQuery solution, since it is just basically Javascript.

2018年05月23日38分53秒

for some reason, prop("checked") worked for me, but not is(':checked')

2018年05月23日38分53秒

and $("#txtAge")[0].checked

2018年05月23日38分53秒

why not $('#isAgeSelected').checked ?

2018年05月23日38分53秒

to use .is you need a colon $('#isAgeSelected').is(':checked')

2018年05月23日38分53秒

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

2018年05月23日38分53秒

Well, .hidden is not very cross-browser, although I like this solution :)

2018年05月23日38分53秒

It is indeed the best way to use style. That is unfortunate though, as .hidden performance is way better.

2018年05月23日38分53秒

Assignment inside a conditional operator? Legal, yes. Not what I'd call good style, however.

2018年05月23日38分53秒

can simplify to: ageInput.hidden = ! this.checked; (I hate when people use boolean literals unnecessarily... if you are using both "true" and "false" in the same simple statement, it's probably unnecessary to use either)

2018年05月23日38分53秒

alert($('input[name=isAgeSelected]').attr('checked')); The above code shows true/false based on the check. Any problem with the previous tries

2018年05月23日38分53秒

Prasad, are you referencing your checkbox by name or ID? I'm getting confused now...

2018年05月23日38分53秒

i have referenced it by name

2018年05月23日38分53秒

Can you not give it an ID? Things would be a lot easier, In your example you have address it by it's ID

2018年05月23日38分53秒

The .size() method is deprecated as of jQuery 1.8. Use the .length (with no () ;-) property instead ! And maybe you have to stick together "#isAgeSelected:checked".

2018年05月23日38分53秒

how to do it if checkbox is in grid ? stackoverflow.com/questions/44092743/…

2018年05月23日38分53秒

I understand why this might work in certain scenarios, although it has the same issue as .attr('checked') in that it doesn't always return the correct state. As per Salman A's answer (and perhaps others'), it's a safer option to make use of .prop('checked') instead. Besides, it's also possible to declare undefined as var undefined = 'checked';.

2018年05月23日38分53秒

.prop('checked') does seem a better answer now. It wasn't as reliable at the time it was written. I do not understand, nor do think it is a good idead to redeclare undefined.

2018年05月23日38分53秒

As a side note, checking for undefined is better with typeof (x) !== "undefined"

2018年05月23日38分53秒

In that case, I believe it is more accurate and easier to read with !==. I would use the typeof(x) only when testing a variable that may or may not have been defined in the past.

2018年05月23日38分53秒

This is a REAL problem. My workaround - add a change event to the input: <input type="checkbox" onchange="ChangeChkBox()" /> then use that event to change a boolean JavaScript variable, and use the JavaScript variable instead of querying the checkbox directly.

2018年05月23日38分53秒