如何根据该列标题检查表行中的单选按钮？

Question

我有一个类似下面的场景：

我必须在具有标题“ MyHeader2”的单选按钮上添加属性“已检查”

 <table> <tr> <th> MyHeader </th> <th> MyHeader2 </th> </tr> <tr> <td> <input type='radio' name='testradio' /> </td> <td> <input type='radio' name='testradio1' /> </td> </tr> </table> 

如何在jQuery中实现呢？

Answer 1

尝试这个：

$("table tr th:contains(MyHeader2)").each(function(){
  var i = $(this).index(); //Get the index of the th.
  $("table tr td:eq("+i+") input:radio").prop("checked",true); // Set the radio to checked. 
})

演示

 $("table tr th:contains(MyHeader2)").each(function() { var i = $(this).index(); $("table tr td:eq(" + i + ") input:radio").prop("checked", true) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th> MyHeader </th> <th> MyHeader2 </th> </tr> <tr> <td> <input type='radio' name='testradio' /> </td> <td> <input type='radio' name='testradio1' /> </td> </tr> </table> 

Answer 2

您最好考虑在需要此类data-attributes地方使用data-attributes 。

让您的生活更轻松。

只需将标题作为数据属性添加到复选框即可

data-heading="MyHeader"

然后，您很容易选择喜欢

$("input[data-heading='MyHeader2']")

 $("input[data-heading='MyHeader2']").prop("checked", true) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <th> MyHeader </th> <th> MyHeader2 </th> </tr> <tr> <td> <input type='radio' data-heading="MyHeader" name='testradio' /> </td> <td> <input type='radio' data-heading="MyHeader2" name='testradio1' /> </td> </tr> </table> 

Answer 3

您可以首先根据标头MyHeader2的值获取标头索引。 使用该索引，您可以选择td的单选按钮并将其标记为选中状态。

 $(document).ready(function(){ var headerValue = 'MyHeader2'; $('table tr th').each(function(index){ if($(this).text().trim() === headerValue){ headerIndex = index; } }); $('table tr').each(function(){ $(this).find('td:eq('+headerIndex+')').find('input[type=radio]').prop("checked", true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr> <th> MyHeader </th> <th> MyHeader2 </th> </tr> <tr> <td> <input type='radio' name='testradio' /> </td> <td> <input type='radio' name='testradio1' /> </td> </tr> <tr> <td> <input type='radio' name='testradio3' /> </td> <td> <input type='radio' name='testradio4' /> </td> </tr> </table>