[英]How to check a radio button in the table row based on that column header?
我有一個類似下面的場景:
我必須在具有標題“ 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中實現呢?
嘗試這個:
$("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>
您最好考慮在需要此類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>
您可以首先根據標頭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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.