jquery javascript .prop("checked") on checkbox returns undefined for checked checkbox

Question

To begin I use prop("checked") in stead of attr("checked") because as if I understand it, the prop is used to retrieve wether te checkbox is checked or not, and the attr only tells you wether the html attribute is set or not (like in the initial html code).

Now I have two checkboxes written out in php like this:

echo '<h4>Special</h4>';
$specials=array('Is Home Page', 'Does not appear in navigation');
for($i=0;$i<count($specials);++$i){
if($specials[$i]!=''){
    echo '<input type="checkbox" name="special[',$i,']"';
    if($page['special']&pow(2,$i))
        echo ' checked="checked"';
    echo ' />',$specials[$i],'<br />';
}
}

Which results in elements :

<input type="checkbox" name="special[0]"/>
<input type="checkbox" name="special[1]"/>

when I check one of the checkboxes I want to retrieve the value to send to the server but this does not seem to work:

var $home = $("#tabs-advanced-options input[name='special[0]']");
//if($home.is(":checked")){ // always returns false
if($home.prop("checked")){  // always returns undefined
 special["0"] = "Home";
}
var $hidden = $("#tabs-advanced-options input[name='special[1]']");
//if($hidden.is(":checked")){ // always returns false
if($hidden.prop("checked")){ // always returns undefined
 special["1"] = "isHidden";
}

As pointed out in the comment of the code, the prop("checked"), always returns undefined. I now the checkboxes are checked ... Also I have tried with the is(":checked"), but that always returns false. There is only one dom element selected each time (I know the .prop() only works for the first in the set)

Any ideas are appreciated!

The selector is correct as I have tested it in the console and it returns the correct result (with and without the backslashes-:

$("#tabs-advanced-options input[name='special\\[1\\]']")
<input type="checkbox" name="special[1]">

$("#tabs-advanced-options input[name='special\\[0\\]']")
<input type="checkbox" name="special[0]">

$("#tabs-advanced-options input[name='special[1]']")
<input type="checkbox" name="special[1]">

$("#tabs-advanced-options input[name='special[0]']")
<input type="checkbox" name="special[0]">

I have used jQuery version

i'm using jquery 1.9.0:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Regards!

What's the version of jQuery are you using??

palaѕн
– palaѕн

2013-06-20 14:13:29 +00:00
Commented Jun 20, 2013 at 14:13 — palaѕн
– palaѕн, Commented Jun 20, 2013 at 14:13
does $home has any element?

Claudio Redi
– Claudio Redi

2013-06-20 14:14:21 +00:00
Commented Jun 20, 2013 at 14:14 — Claudio Redi
– Claudio Redi, Commented Jun 20, 2013 at 14:14
@ruben056 A jsfiddle will be better.

Praveen
– Praveen

2013-06-20 14:15:32 +00:00
Commented Jun 20, 2013 at 14:15 — Praveen
– Praveen, Commented Jun 20, 2013 at 14:15
Put your generated HTML code too :)

user1823761
– user1823761

2013-06-20 14:16:24 +00:00
Commented Jun 20, 2013 at 14:16 — user1823761
– user1823761, Commented Jun 20, 2013 at 14:16

bastos.sergio · Accepted Answer · 2013-06-20 14:19:58Z

4

Per the JQuery documention you have to escape the square brackets.

var $home = $("#tabs-advanced-options input[name='special\\[0\\]']");
//if($home.is(":checked")){ // always returns false
if($home.prop("checked")){  // always returns undefined
     special["0"] = "Home";
}
var $hidden = $("#tabs-advanced-options input[name='special\\[1\\]']");
//if($hidden.is(":checked")){ // always returns false
if($hidden.prop("checked")){ // always returns undefined
    special["1"] = "isHidden";
}

answered Jun 20, 2013 at 14:19

bastos.sergio

6,7644 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ruben056 Over a year ago

I have added the backslashes but to no avail. Also I have checked the $home and the $hidden and they do contain the correct input element!

bastos.sergio Over a year ago

what's the value of $home.length or $hidden.length? if they're zero then that means the selector has no elements associated.

ruben056 Over a year ago

length is 1, also i have extended the initial questions with some selector results in the browser console which return the correct element

bastos.sergio Over a year ago

please create a JsFiddle of your problem. As you can see this jsfiddle works fine.

ruben056 Over a year ago

Allright i have found the issue. When dynamically filling the content of the form, i used the removeProp("checked") operation in stead of the prop("checked",false). Now all is working fine

Collectives™ on Stack Overflow

jquery javascript .prop("checked") on checkbox returns undefined for checked checkbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related