CODEWITHSUNDEEP
jquerycheckbox
ruben056
ruben056

Reputation: 112

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

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!

Upvotes: 0

Views: 2292

Answers (1)

bastos.sergio
bastos.sergio

Reputation: 6764

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";
}

Upvotes: 4

Related Questions