如何根据单选按钮自动检查另一个单选按钮

根据我的理解，我已经为相同的编码标准(HTML命名)创建了一个fiddler。

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

$(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>   

可以这样做…

$ (" # radio_1 ")。Prop ("checked"， true)

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

$ (" # radio_1 ")。attr("检查","检查");

$(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>

我建议使用与以下方法类似的方法，其中使用通用的自定义data-*属性选择元素，该属性允许简单的选择，并且缓存了集合后，允许轻松过滤该集合以针对要更改的适当元素。

另外，我已经将name属性更改为"组"，否则只有一个无线电<input>从任何数量的元素共享相同的name属性可以是checked。

// 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() .

详细信息在代码片段

片段

// 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>