Question

我的情况如下：

我必须添加属性＆＃39;已检查＆＃39;在带有标题＆＃39; MyHeader2＆＃39;

的单选按钮上

＆＃13;

<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>

＆＃13;

如何在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. 
})

<强>演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您最好考虑在需要这样的地方使用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>

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

3 个答案: