javascript - 如何使用点击事件获取表格上的值单选？

Question

我想使用点击事件获取表中单选按钮的值。注意，获取列中单选按钮的值

<table id="div_table" width="500px" border="2px" cellpadding="2" cellspacing="2" >
<tr>
<td >Column Name1</td>
<td>Column Name2</td>
<td >Column Name3</td>
</tr>

<tr >
<td >PN1</td>
<td ><input type="radio" name="RD_CHECK" value="ABC">ABC</td>
<td ></td>
</tr>

<tr >
<td >PX2</td>
<td ><input type="radio" name="RD_CHECK" value="XYZ">XYZ <input type="radio" name="RD_CHECK" value="CBA">CBA</td>
<td ><input type="radio" name="RD_CHECK" value="123">123 <input type="radio" name="RD_CHECK" value="456">456</td>
</tr>
</table>

好的，示例:我检查了 column2 的 radio ，但它不起作用。

 $(document).ready(function ()
        {
            $('body').on('click','#div_table tbody tr', function ()
            {
                if ($("input[type='radio']").is(':checked') == true && $(this).find('td:eq')==1)
                {
                    //value of radio in Column2
                    alert('This is Column 2 and value = '+$("input:checked").val());
                }
                else
                {
                  // value of radio in Column3
                    alert('This is Column 3 and value = '+$("input:checked").val());
                }
            });
   });

给我建议。谢谢大家。

Answer 1

• $("input[type='radio']").is(':checked') == true将得到checked仅第一个匹配的属性 <input> 。如果您的第一个 radio 未被选中，则此操作将失败。
• $(this).find('td:eq') == 1始终为 true，因为即使没有匹配的 jQuery 构造函数也会返回一个对象(真实值)。

相反，将事件附加到单选按钮本身。您可以通过查找 .index() 来获取该列 .closest() 的<td> 。要获取该值，只需使用事件的上下文即可:

$(document).ready(function () {
    $('body').on('click', '#div_table  tr :radio', function () {
        var col = $(this).closest('td').index();
        alert('This is Column ' + col + ' and value = ' + this.value);
    });
});

JSFiddle