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

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

Answer 2

可以做任何这个...

$（＆＃34; #radio_1＆＃34;）。prop（＆＃34; checked＆＃34;，true）

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

$（＆＃34;＃radio_1＆＃34;）。attr（＆＃39;已检查＆＃39;，＆＃39;已检查＆＃39;）;

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属性稍微更改为＆＃39;组，＆＃39;否则，共享相同<input>属性的任意数量元素中只有一个广播name可能为checked。

＆＃13;

// 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');
});

＆＃13;

label.checked {
  color: limegreen;
}

＆＃13;

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

＆＃13;

参考文献：

CSS：
- Attribute-selectors。
jQuery的：
- addClass()。
- filter()。
- on()。
- removeClass()。
- parent()。
- prop()。
- siblings()。

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

6 个答案:

段