Question

我想使用一些无线电输入来创建表格。选中输入后，还会使用jQuery自动检查另一个单选。

例如：

问题1：A（已选中），B，C 问题2：D（自动检查），E，F

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<tr>
  <td>

    <form name="form1" enctype="multipart/form-data">
     <input type="radio" value="A" name="teamA" /> A<br />
      <input type="radio" value="B" name="teamA" /> B<br />
      <input type="radio" value="C" name="teamA" /> C<br />
<br /><br />
  </td>
  <td></td>
     <input type="radio" value="D" name="teamB" /> D<br />
     <input type="radio" value="E" name="teamB" /> E<br />
     <input type="radio" value="F" name="teamB" /> F<br />
    </form>
  </td>
 </tr>

</body>
</html>

Answer 1

如上面的链接所示，您可以使用jquery更改单选按钮的选择，如下所示：

$(document).ready(function(){

 $('#step1 input').on('change', function() {
   alert($('input[name=test]:checked', '#step1').val()); 
   
   if($('input[name=test]:checked', '#step1').val()=='no')
 {
   
     $('#yes1').prop("checked", true);
   }
   else
 {
  $('#no1').prop("checked", true);
   
   }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="step1">
    <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
      
    <div class="btn-group" data-toggle="buttons">
      
    <label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
      
    <input type="radio" name="test" class="test" id="yes" value="yes">YES</label>
      
    <label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
    <input type="radio" name="test" class="test" id="no" value="test2">NO</label>
      
    	</div>
      </div>
    </div>
</div>



<div id="step2">
    <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
      
    <div class="btn-group" data-toggle="buttons">
      
    <label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
      
    <input type="radio" name="test1" class="test" id="yes1" value="yes">YES</label>
      
    <label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
    <input type="radio" name="test1" class="test" id="no1" value="test2">NO</label>
      
    	</div>
      </div>
    </div>
</div>

Answer 2

这是jQuery的有效用法，可以完成您要求的工作（带有jQuery）。我还清理了一些html：

您缺少开始和结束标签
我将表单标记放在表（作为父表）的外部，因为它先前是在一个行单元格中开始并在另一行单元格中结束的是非标准html
在输入周围添加了标签-当有人单击“ A”时，这是预期的UI /标准最佳做法单选按钮。

$(document).ready(function() {
//on any change in teamA
   $("[name=teamA]").change(function() {

     //get the index of clicked item (this) among set of teamA
     //A is 0, B is 1, C is 2 within teamA, 
     //C is 0, D is 1, E is 2 within team B 
     //it's their order within the set
     var clickedItemIndex=$(this).index("[name=teamA]");
      $("[name=teamB]").eq(clickedItemIndex).prop("checked",true);
      
   });
});

   
label { display: block }  /* brs are a nuisance, display: block */

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
  <!--1. Another item you may have missed is that your code is missing <table> start and end blocks
       2. I also took your form and put it OUTSIDE your table, it's not good form to start a form in one cell (a td block) and then end in another when you can just put the form as the parent to the table.
       3. I added labels around inputs as that's standard best-practice, it means when somebody clicks the 'A' it's as if they clicked the radio, again - the expected standard UI of the web
    -->
  <form name="form1" enctype="multipart/form-data">
    <table>
      <tr>
        <td>
          <label><input type="radio" value="A" name="teamA" /> A</label>
          <label><input type="radio" value="B" name="teamA" /> B</label>
          <label><input type="radio" value="C" name="teamA" /> C</label>
          
        </td>
        <td>
          <label><input type="radio" value="D" name="teamB" /> D</label>
          <label><input type="radio" value="E" name="teamB" /> E</label>
          <label><input type="radio" value="F" name="teamB" /> F</label>
        </td>
      </tr>
    </table>
  </form>
  <script>
  </script>
</body>

</html>

Answer 3

您可以尝试使用下面的代码吗？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<tr>
  <td>

    <form name="form1" enctype="multipart/form-data">
     <input type="radio" value="A" name="teamA" onclick="getit()"/> A<br />
      <input type="radio" value="B" name="teamA" onclick="getit()" /> B<br />
      <input type="radio" value="C" name="teamA" onclick="getit()"  /> C<br />
<br /><br />
  </td>
  <td></td>
     <input type="radio" value="D" name="teamB" /> D<br />
     <input type="radio" value="E" name="teamB" /> E<br />
     <input type="radio" value="F" name="teamB" /> F<br />
    </form>
  </td>
 </tr>
<script>
function getit(){
var teamA=document.getElementsByName("teamA");
            for (i = 0; i < teamA.length; i++) {
                if (teamA[i].checked) {
                    var teamB=document.getElementsByName("teamB");
                     teamB[i].checked = true;
                }
          }
}
</script>
</body>
</html>

检查另一个无线电输入时更改一个无线电输入

3 个答案: