为什么.next() 给我“未定义”

Question

why does.next() returns 'undefined'? http://jsfiddle.net/radek/sD6JB/2/

html

<button value="login|basic" class="square_button button_background" type="button"> run </button>
<input name="restore" title="restore before ant run" type="checkbox">

<button value="test|advanced" class="square_button button_background" type="button"> run </button>
<input name="restore" title="restore before ant run" type="checkbox">

<button value="best|4444" class="square_button button_background" type="button"> run </button>
<input name="restore" title="restore before ant run" type="checkbox">

<div id='results'/>

javascript + jQuery

$(document).ready(function(){
    $('button[type=button]').click(function(){
        var params = $(this).val();
        document.getElementById("results").innerHTML+=
          "<BR>"+params.split('|')[0]+" - "
           + params.split('|')[1]+" - "
           + $(this).next().checked;
     });
});

Answer 1

A jQuery object has no checked property.

You can either...

(a) Subscript the native DOM element with [0] or get(0) .

(b) Access prop('checked') (>= jQuery 1.6 only.)

(c) Use is(':checked') .

Answer 2

That's because you're calling .checked on the jQuery object and not the DOM element. If you want to call .checked you need to get the DOM element out of the jQuery collection.

Simply changing that line to the below will work

$(this).next().get(0).checked

Fixed fiddle: http://jsfiddle.net/sD6JB/3/

Answer 3

It is undefined because, when you are in the click function $(this) set only holds one element, on which you define the click property. So there is no next sibling in the set.

Explanation:

$('button[type=button]') holds all button elements with type=button attribute. When you define clickhandler on them, you create a function for each, and in that function this will be the element, on which you define the event handler. When you the use $(this) you create a jQuery wrapper set, that contains only this element. .next() is used to select the next sibling in the set, but your set has only one element.

Solution:

$(this).siblings("input").is(":checked")

Btw, using checked is also a problem, but your initial undefined problem's cause is the above. Use .is(":checked") instead.