如何自动检查基于另一个的单选按钮？

Question

我有两（2）种形式（div：向导形式）：

• 第一个表格（div）要求用户检查单选按钮

• 第二种形式（div）用于验证用户是否要更改某些内容

问题出在第二种形式：

如何自动检查用户在第一个表单中选中的第二个表单中的同一单选按钮？

我有一个单选按钮，可以在YES和NO之间进行选择。

因此，如果用户选择“ YES按钮，则需要在第二个表单（div）中自动选中“ YES按钮。

编码：

 yes_no = $('input[name="test"]:checked').val(); alert(yes_no); 

 <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="test" class="test" id="yes_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_no" value="test2">NO</label> </div> </div> </div> </div> 

Answer 1

根据我的理解，我为相同的东西创建了一个提琴手，并且编码标准（HTML命名）很糟糕。

https://jsfiddle.net/t65​​1ujm0/5/

$("input[name='test']").click(function(){
      $("input[name='test1'][value='"+$(this).val()+"']").attr('checked', 'checked');
});

Answer 2

可以做任何...

$（“＃radio_1”）。prop（“ checked”，true）

对于1.6之前的jQuery版本，请使用：

$（“＃radio_1”）。attr（'checked'，'checked'）;

Answer 3

 $(document).ready(function(){ $('#form1 input').on('change', function() { alert($('input[name=test]:checked', '#form1').val()); if($('input[name=test]:checked', '#form1').val()=='yes') { $('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true); } else { $('.'+$('input[name=test]:checked', '#form1').val(),'#form1').prop("checked", true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1" id="form1" > <div class="div1"> <input type="radio" name="test" class="test" id="yes" value="yes">YES <label class="btn btn-default btn-off btn-xs" id="label_mobile_no"> <input type="radio" name="test" class="test" id="no" value="no">NO</label> </div> <div class="div2"> <input type="radio" name="test1" class="yes" value="yes">YES <label class="btn btn-default btn-off btn-xs" id="label_mobile_no"> <input type="radio" name="test1" class="no" value="no">NO</label> </div > </form> 

Answer 4

片段中有详细评论

SNIPPET

 // When DOM content is ready $(function() { var no = $('input[name="test"][value="no"]'); var yes = $('input[name="test"][value="yes"]'); var neg = $('input[name="result"][value="neg"]'); var pos = $('input[name="result"][value="pos"]'); // Delegate the click event on [no] only no.on('click', function(e) { neg.prop('checked', true); }); // Delegate the click event on [yes] only yes.on('click', function(e) { pos.prop('checked', true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='f1' name='f1'> <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="no">NO</label> </div> </div> </div> </form> <form id='f2' name='f2'> <fieldset> <legend>Form 2</legend> <label> <input type='radio' name='result' value='neg'>Neg</label> <label> <input type='radio' name='result' value='pos'>Pos</label> </fieldset> </form> 

Answer 5

 $(document).ready(function(){ $('#step1 input').on('change', function() { alert($('input[name=test]:checked', '#step1').val()); if($('input[name=test]:checked', '#step1').val()=='yes') { $('#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 6

我建议采取与以下方法类似的方法，其中使用通用的自定义data-*属性选择元素，该属性允许简单选择，并且已缓存了集合，可以轻松过滤该集合以将其作为目标要改变的元素。

另外，我将name属性稍微更改为“组”，否则只能checked来自相同name属性的任意数量元素的一个radio <input> 。

 // caching the relevant elements, here we select <input> elements, // of 'type=radio' which have a custom data-choice attribute: var choices = $('input[type=radio][data-choice]'); // use the on() method to bind the anonymous function of the // method as the event-handler for the 'change' event on // those elements: choices.on('change', function() { // retrieving the value of the data-choice attribute // dataset property of the changed element: var choice = this.dataset.choice; // filtering the cached collection of elements to those // which have the 'data-choice' attribute which is equal // to the value of the changed <input> element: choices.filter('[data-choice=' + choice + ']') // setting the 'checked' property of that element to the // same state as the changed element: .prop('checked', this.checked) // this is just to visibly demonstrate the effectiveness // and can be discarded in your use-case, however here // we move to the parent elements of the retained // <input> elements: .parent() // and add the 'checked' class to those parents: .addClass('checked') // selecting the sibling elements of those parents: .siblings() // and removing the 'checked' class: .removeClass('checked'); }); 

 label.checked { color: limegreen; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <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"> <!-- note that I've removed the id attribute from the radio <input> elements, since you can use alternative custom attributes to select, and group, them; here we use the 'data-choice' custom attribute, with the (obvious) values of 'yes' and 'no' to reflect the user-choice: --> <input type="radio" name="testGroup1" class="test" data-choice="yes" value="yes">YES</label> <label class="btn btn-default btn-off btn-xs" id="label_mobile_no"> <input type="radio" name="testGroup1" class="test" data-choice="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="testGroup2" class="test" data-choice="yes" value="yes">YES</label> <label class="btn btn-default btn-off btn-xs" id="label_mobile_no"> <input type="radio" name="testGroup2" class="test" data-choice="no" value="test2">NO</label> </div> </div> </div> </div> 

参考文献：

• CSS：
  • 属性选择器 。
• jQuery的：
  • addClass() 。
  • filter() 。
  • on() 。
  • removeClass() 。
  • parent() 。
  • prop() 。
  • siblings() 。