Question

我想循环表的每一行并检查收音机，如果没有默认选中，我们将检查值= Local，如果已经默认选中，则保留它。

我的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script>
    $( document ).ready(function() {
    $('.tableA tr').each(function (index) {
      //processing this row         
      //how to process each cell(table td) where there is checkbox  
      var countChecked = 0;
      console.log("Row: "+index);
        if(!$(this).find('input[type="radio"]').is(":checked")){
          console.log("None Checked");
          countChecked = 1;
        } else {
          var radioValue = $(this).find('input[type="radio"]:checked').val();
          console.log("This row has checked: "+radioValue);
        }

        if (countChecked>0){
          $(this).find(':radio[name=radioName][value=Local]').attr('checked', true);        
        }
      });      
    });
  </script>
</head>
<body>
<table class="tableA" border='1'>
<tr>
  <td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>
<tr>
  <td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" checked /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>
<tr>
  <td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>  
</table>


</body>
</html>

Jsbin Link

这不起作用，但如果我注释掉这一行：

$(this).find(':radio[name=radioName][value=Local]').attr('checked', true);

控制台将正确显示。有什么想法吗？

Answer 1

真正的问题是所有的无线电项目都有相同的名称，因此它们实际上是一个大的无线电组。这意味着只能选择12个中的一个。

确保3个组中的每个组都有唯一的名称，然后从选择器过滤器中删除name=radioName。

https://jsfiddle.net/sehmxwwn/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script>
    $( document ).ready(function() {
    $('.tableA tr').each(function (index) {
      //processing this row         
      //how to process each cell(table td) where there is checkbox  
      var countChecked = 0;
      console.log("Row: "+index);
        if(!$(this).find('input[type="radio"]').is(":checked")){
          console.log("None Checked");
          countChecked = 1;
        } else {
          var radioValue = $(this).find('input[type="radio"]:checked').val();
          console.log("This row has checked: "+radioValue);
        }

        if (countChecked>0){
          $(this).find(':radio[value=Local]').attr('checked', true);        
        }
      });      
    });
  </script>
</head>
<body>
<table class="tableA" border='1'>
<tr>
  <td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>
<tr>
  <td>
<input type="radio" name="radioName1" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName1" class="myRadio" value="2" checked /> 2 <br />
<input type="radio" name="radioName1" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName1" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>
<tr>
  <td>
<input type="radio" name="radioName2" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName2" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName2" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName2" class="myRadio" value="Local" /> Local <br />
  </td>
</tr>  
</table>


</body>
</html>

Answer 2

尝试使用prop代替attr来检查属性。

$(this).find(':radio[name=radioName][value=Local]').prop('checked', true);

Answer 3

更改此类代码。使用prop代替attr

 $(this).find('input[value=Local]').prop('checked', true);

并且还做以下事情

设置单选按钮的group
不要对所有单选按钮使用相同的名称。因为radion按钮是按名称分组的。所以使用每个组的个人名称

$(document).ready(function() {
  $('.tableA tr').each(function(index) {

    var countChecked = 0;
    if (!$(this).find('input[type="radio"]').is(":checked")) {
      countChecked = 1;
    } else {
      var radioValue = $(this).find('input[type="radio"]:checked').val();
    }
    if (countChecked > 0) {
      $(this).find('input[value=Local]').prop('checked', true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableA" border='1'>
  <tr>
    <td>
        <input type="radio" name="radioName0" class="myRadio" value="1" /> 1 <br />
        <input type="radio" name="radioName0" class="myRadio" value="2" /> 2 <br />
        <input type="radio" name="radioName0" class="myRadio" value="3" /> 3 <br />
        <input type="radio" name="radioName0" class="myRadio" value="Local" /> Local <br />
    </td>
  </tr>
  <tr>
    <td>

        <input type="radio" name="radioName1" class="myRadio" value="1" /> 1 <br />
        <input type="radio" name="radioName1" class="myRadio" value="2" checked /> 2 <br />
        <input type="radio" name="radioName1" class="myRadio" value="3" /> 3 <br />
        <input type="radio" name="radioName1" class="myRadio" value="Local" /> Local <br />

    </td>
  </tr>
  <tr>
    <td>

        <input type="radio" name="radioName2" class="myRadio" value="1" /> 1 <br />
        <input type="radio" name="radioName2" class="myRadio" value="2" /> 2 <br />
        <input type="radio" name="radioName2" class="myRadio" value="3" /> 3 <br />
        <input type="radio" name="radioName2" class="myRadio" value="Local" /> Local <br />

    </td>
  </tr>
</table>

Answer 4

试试这个，

$("input[name=radioName][value='local']").prop("checked",true);

Answer 5

如果您需要进行任何修改，请根据您的description.com查找工作/修改jsBin code。

完成修改：

1.使用每个表行（tr）上单选按钮的唯一名称。

2.在代码行下面修改

if (countChecked>0){
          $(this).find(':radio[value=Local]').prop('checked', 'checked');        
        }

Jquery：每个表行检查无线电不工作

5 个答案: