跨度文本为True，则选中单选按钮，否则未选中

Question

请仔细阅读此问题。

我希望跨页文本在pageLoad上为“ True”时选中复选框值。 下面的示例可以很好地在单选按钮上单击，然后将范围值设为“ true”或“ false”。

码

 $('table').on('change', ':radio', function () { $(this).next('span').text('True').closest('td') .siblings().find('span').text('False'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' ><span>False</span></td> <td> <input type='radio' name='attandance' ><span>False</span></td> <td> <input type='radio' name='attandance' ><span>False</span></td> </tr> </table> 

我想如果span值为true，那么单选按钮会自动检查。 这是附件

谢谢。

Answer 1

 $('table') .on('change', ':radio', function () { $(this).next('label').text('True').closest('td') .siblings().find('label').text('False'); }) .find('label').filter(function(){ return $(this).text().toLowerCase() === 'true'; }).closest('td').find('input').prop('checked', true); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' id="opt1"><label for="opt1">False</label></td> <td> <input type='radio' name='attandance' id="opt2"><label for="opt2">True</label></td> <td> <input type='radio' name='attandance' id="opt3"><label for="opt3">False</label></td> </tr> </table> 

我也将span更改为label ，因为这是一个好习惯。 但是本质是：找到标签/跨度，检查文本，然后向上查找并更改input 。

Answer 2

@faizan，正如我所看到的，您已经准备好进行onchange的功能了，您只需要在页面/文档加载时更改值即可。

我建议您可以使用$(document).ready()函数。

$(document).ready()函数将在发现真值时自动设置选中的单选按钮。

  $('table').on('change', ':radio', function () { $(this).next('span').text('True').closest('td') .siblings().find('span').text('False'); }); // Page load event to checked the true value $(document).ready(function(){ $("table td").each(function(i, obj){ var value = $(obj).find("span").text(); if(value === "True"){ $(obj).find("input[type='radio']").prop("checked",true); } }) }) 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' ><span>False</span></td> <td> <input type='radio' name='attandance' ><span>True</span></td> <td> <input type='radio' name='attandance' ><span>False</span></td> </tr> </table> 

我建议您在表中使用特定的ID，这将使jQuery在页面中选择特定的表更加容易。

 <table id="tblAttendance">