How to automatically check a radio button based on another?

Question

I have two (2) forms(div : wizard form):

The first form(div) asks the user to check a radio button
The second form (div) is for verification if the user want to change something

The problem is in the second form:

How I can automatically check the same radio button in the second form that the user checked in the first form?

I have a radio button the choose between YES and NO.

So, If the user selects the YES button, I need the YES button checked automatically in the second form(div).

The code:

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>

http://stackoverflow.com/questions/5665915/how-to-check-a-radio-button-with-jquery?rq=1 — Natrium, Oct 12 '16 at 11:38
Hi Alexis, you would need to persist your data between pages, you should try using Session. See the following article: http://stackoverflow.com/questions/240470/transfer-variables-between-php-pages — Craig Mayers, Oct 12 '16 at 11:51
@CraigMayers I need javascript not PHP the two form is in the same page ( wizard form ) — saadsaad, Oct 12 '16 at 11:57
Can you show the second form also, that way we can offer specific help; this *should* be simple enough to implement, but it's better for you - and future visitors - if we can show a specific example of the implementation. — David Thomas, Oct 12 '16 at 12:04
You have two elements with an `id` of `yes`, and two elements with an `id` of `no`; this is invalid HTML; an `id` must be unique within the document. — David Thomas, Oct 12 '16 at 12:14
@DavidThomas I change it without result and I use this function `$("#yes").prop("checked", true);` — saadsaad, Oct 12 '16 at 12:19
@saadsaad i have implemented the similar functionality in the fiddler check once https://jsfiddle.net/t651ujm0/5/ — Rudresha Parameshappa, Oct 12 '16 at 12:43

score 1 · Answer 1 · answered Oct 12 '16 at 12:46

As per my understanding I have created a fiddler for the same and coding standard(HTML naming) is bad.

https://jsfiddle.net/t651ujm0/5/

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

score 0 · Answer 2 · answered Oct 12 '16 at 11:50

0

Can do any of this...

$("#radio_1").prop("checked", true)

For versions of jQuery prior to 1.6, use:

$("#radio_1").attr('checked', 'checked');

answered Oct 12 '16 at 11:50

Sweety Webashlar

81
8

I try but without any result – saadsaad Oct 12 '16 at 11:57
can you please show code for both form and when you want to pass value actually to second form? – Sweety Webashlar Oct 12 '16 at 12:08
please check my answer below...Thanks – Sweety Webashlar Oct 12 '16 at 12:22

JYoThI · Answer 3 · 2016-10-12T12:28:41.520

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

It I wizard form ( multiphase ) so, I use 1 form but I use 2 div ( I make 2 form in the title to explain more ) — saadsaad, Oct 12 '16 at 12:05

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Details are commented in Snippet

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>

score 0 · Accepted Answer · answered Oct 12 '16 at 12:21

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

score 0 · Answer 6 · answered Oct 12 '16 at 12:50

I'd suggest something similar to the following approach, in which the elements are selected using a common custom, data-*, attribute which allows for simple selection and, having cached the collection, allows for easy filtering of that collection to target the appropriate elements to change.

Also, I've changed the name attributes a little into 'groups,' otherwise only one radio <input> from any number of elements sharing the same name property could be 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>

References:

CSS:
- Attribute-selectors.
jQuery:
- addClass().
- filter().
- on().
- removeClass().
- parent().
- prop().
- siblings().

How to automatically check a radio button based on another?

6 Answers6

SNIPPET