Determine if radio buttons are checked using jQuery

Question

I have the following table:

<table id="tableID">
    <tr id="rowID">     
        <td class="qCol">     
          <select name="select1">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
        </td>      
        <td class="qCo2">     
        <!-- img here -->     
        <input type="text" name="text1" id="text1" />
        </td>      
        <td class="qCo3">     
          <select name="select2">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>   
        </td>      
        <td class="qCo4">     
        <!-- radio buttons here -->   
           <input type='radio' name='name' value='1'>  
           <input type='radio' name='name' value='2'>
           <input type='radio' name='name' value='3'>
        </td>      
        <td class="qCo5">     
         <select name="select3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
                    </select>   
        </td>     
        <td class="qCo6">     
        <!-- hidden validation image here -->     
        </td> 
    <tr> 
</table>

and I have the following jQuery

$("#rowID input[type=text]").blur(function () {

    if ($(this).children("input:radio").is(':checked')) {
        alert("yes");
    } else {
        alert("no");
    }

});

however regardless of whether one of the radio buttons is selected I'm still getting the alert "no". Now I know I can see the name of the radio button group but in certain situations I won't be able to due to GUIDs - what's the best method or way to work through the dom starting at the onblur event of the textbox on the same row to determin if one of the radio buttons is checked.

The `input[type=text]` elements have no `input:radio` children. In fact, `input` elements cannot have any children. So you get `no` because `$(this).children("input:radio")` does not select any elements. — Felix Kling, Aug 01 '11 at 12:28
please check out this question [http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery][1] [1]: http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery Thanks. — Chandresh M, Aug 01 '11 at 12:44

score 2 · Accepted Answer · answered Aug 01 '11 at 12:29

Your problem is because $(this) is referring to the textbox and not the rowID.

To fix do this:

$("#rowID input[type=text]").blur(function () {

    var checkedRadios = $('#rowID').find('input:radio:checked');

    if (checkedRadios.length > 0) {
        alert("yes");
    } else {
        alert("no");
    }

});

score 0 · Answer 2 · answered Aug 01 '11 at 12:29

0

You're using a text box selector and binding to their blur events, and within that event handler, $(this) refers to the text box itself. Since you don't have any children of the text box, it never finds any radio buttons.

answered Aug 01 '11 at 12:29

Tim S. Van Haren

8,861
2
30
34

score 0 · Answer 3 · answered Aug 01 '11 at 12:29

0

$("#rowID input[type=text]").blur(function () { //ect...

$(this) insude the function will refere to your text inputs.

you need to select type=radio.

answered Aug 01 '11 at 12:29

meo

30,872
17
87
123

Determine if radio buttons are checked using jQuery

3 Answers3