why does .next() returns 'undefined'? /

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

why does .next() returns 'undefined'? http://jsfiddle/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;
     });
});

• javascript
• jquery
• jquery-selectors

• 1 Why do you even have <button type="button"> tags in the first place? Buttons are buttons. – BoltClock Commented May 31, 2011 at 7:09
• "Buttons are buttons." lol! – sscirrus Commented May 31, 2011 at 7:11
• @BoltClock The default type attribute of button is submit. Source. – alex Commented May 31, 2011 at 7:15
• why? bacause of that w3schools./tags/tag_button.asp – Radek Commented May 31, 2011 at 7:15
• all great answers and withing 2 minutes of posting my question ... – Radek Commented May 31, 2011 at 7:23

3 Answers 3

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').

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/sD6JB/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.