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

标签 javascript jquery html

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

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

给我建议。谢谢大家。

最佳答案

  • $("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

关于javascript - 如何使用点击事件获取表格上的值单选?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26993161/

相关文章:

javascript - bootstrap中如何获取窗口的高度和宽度

jquery - 如何使用 jQuery 为菜单添加悬停效果

javascript - 如何使文本框只接受 0-10 之间的数字,并且只接受小数部分的 0.5?

jquery - 在 li 标签内居中 img 标签

javascript - 给两边的文字等边距

html - 如何在表中包含虚拟 tr 以设置列宽, "table-layout"设置为 "fixed"但高度为零

javascript - v-for 循环中的模数

javascript - 如何通过Javascript分配验证组

javascript - 增加filterrific_observe_field计时器的正确方法

javascript - 从 iframe 访问父页面的 id 元素