Javascript 自动更改另一窗体上的收音机选择

我有两个表格在一个网页像

<tr>
  <td>
    <h4>Team A[Form1]</h4>
    <form name="form1" enctype="multipart/form-data">
     <input type="radio" value="batting" name="teamA" /> Batting<br />
      <input type="radio" value="bowling" name="teamA" /> Bowling<br />
    </form>
  </td>
  <td>
    <h4>Team B[Form2]</h4>
    <form name="form2" enctype="multipart/form-data">
     <input type="radio" value="batting" name="teamB" /> Batting<br />
      <input type="radio" value="bowling" name="teamB" /> Bowling<br />
    </form>
  </td>
 </tr>

A队[表格1]
击球

保龄球

B队[表格2]
击球

保龄球

以及如何在form1选择中自动选择第二个form单选按钮。 如果我在form1中选择Batting，则将form2按钮更改为Bowling selected

我正试着做我喜欢的事

<script type="text/javascript">
     if(document.form1.teamA.checked = 'batting') {
         document.form2.teamB.checked = 'bowling';
     }
    </script>

如果（document.form1.teamA.checked='batting'）{
document.form2.teamB.checked='bowling'；
}

使用以下代码

    <script>
    $(document).ready(function(){

$("input[name='teamA']").change(function(){

    if($("input[name='teamA']:checked").val() == "batting")
    {
       $("input:radio[name='teamB'][value='bowling']").attr('checked', 'checked');
    }
    if($("input[name='teamA']:checked").val() == "bowling")
    {
       $("input:radio[name='teamB'][value='batting']").attr('checked', 'checked');
    }

});


});
    </script>

$（文档）.ready（函数（）{
$（“输入[name='teamA']”）。更改（函数（）{
if（$（“输入[name='teamA']：选中”）.val（）=“击球”）
{
$（“输入：radio[name='teamB'][value='bowling']”）.attr（'checked'，'checked'）；
}
if（$（“输入[name='teamA']：选中”）.val（）=“保龄球”）
{
$（“输入：radio[name='teamB'][value='batting']”）.attr（'checked'，'checked'）；
}
});
});

---

看看这把小提琴

这应该比以前的版本更好：

$(document).ready(function(){
 $("#form1 input:radio[id='bowling']").prop("click",true);
    $("#form1 input:radio").on("change",function(){
   $("#form2 input:radio[id='bowling']").prop("checked", $("#batting").prop("checked"));
    });
});

---

还对HTML进行了一些更改，以便您可以在选择器中使用id。您可以使用

数据
属性定义应“连接”到哪个按钮的字段：

<form name="form1" id="form1" enctype="multipart/form-data">
    <input type="radio" value="batting" data-toggle="bowling" name="teamA" />Batting
    <br />
    <input type="radio" value="bowling" data-toggle="batting" name="teamA" />Bowling
    <br />
</form>


因此，如果有一天值发生变化或添加了新选项，javascript代码将继续工作

或者像这样：

$('#form1 :radio').change(function () {
    $('#form2 :radio[value="' + $(this).data('toggle') + '"]').prop('checked', true);
});


您甚至可以进行双向绑定，以便检查第二个表单中的单选按钮可以更改第一个表单中的状态：


<form name="form1" id="form1" enctype="multipart/form-data">
    <input type="radio" value="batting" data-toggle="bowling" name="teamA" />Batting
    <br />
    <input type="radio" value="bowling" data-toggle="batting" name="teamA" />Bowling
    <br />
</form>

$('#form1 :radio').change(function () {
    $('#form2 :radio').filter('.' + $(this).data('toggle')).prop('checked', true);
});

$('#form1 :radio').change(function () {
    $('#form2 :radio[value="' + $(this).data('toggle') + '"]').prop('checked', true);
});