CODEWITHSUNDEEP
javascripthtml
Chase Price
Chase Price

Reputation: 69

Make one radio button select another radio button

I am building a form with 8 radio buttons, 4 for System A and 4 for System B. The options for the radio buttons are CF, ISO, ISO-B, and NW. I want to make it so that when a customer selects a radio button for System A, the same button is selected on System B.

How do I make whatever I select in System A's radio buttons simultaneously selected in System B's radio buttons?

What I am basing it off of

Upvotes: 2

Views: 2269

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$("input[type='radio']").on("click",function(){
   var Name= this.name == "SystemA"?"SystemB":"SystemA";
   $("input[name='"+Name+"'][value='"+this.value+"']").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>System A</span>
<br>
<input type="radio" name="SystemA" value="CF"/><lable>CF</lable>&nbsp;
<input type="radio" name="SystemA" value="ISO"/><lable>ISO</lable>&nbsp;
<input type="radio" name="SystemA" value="ISO-B"/><lable>ISO-B</lable>&nbsp;
<input type="radio" name="SystemA" value="NW"/><lable>NW</lable>
<hr>
<span>System B</span>
<br>
<input type="radio" name="SystemB" value="CF"/><lable>CF</lable>&nbsp;
<input type="radio" name="SystemB" value="ISO"/><lable>ISO</lable>&nbsp;
<input type="radio" name="SystemB" value="ISO-B"/><lable>ISO-B</lable>&nbsp;
<input type="radio" name="SystemB" value="NW"/><lable>NW</lable>

Upvotes: 2

Duncan Thacker
Duncan Thacker

Reputation: 5188

You could use a databinding framework like ReactJS to do this nicely, but here's a basic jQuery example that would work. Just listen to the "change" event on your first set of radio buttons, then use jQuery to select the appropriate radio button from the second set.

$( function() {

  $("input[name='system-a']").on("change", function(e) {
     var newValue = e.target.value;
     $("input[name='system-b'][value='" + newValue + "']").prop("checked", true);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2>System A</h2>
  <input type="radio" name="system-a" value="1">Option 1</input>
  <input type="radio" name="system-a" value="2">Option 2</input>
  <input type="radio" name="system-a" value="3">Option 3</input>
  <input type="radio" name="system-a" value="4">Option 4</input>
</div>
<div>
  <h2>System B</h2>
  <input type="radio" name="system-b" value="1">Option 1</input>
  <input type="radio" name="system-b" value="2">Option 2</input>
  <input type="radio" name="system-b" value="3">Option 3</input>
  <input type="radio" name="system-b" value="4">Option 4</input>
</div>

Upvotes: 2

Related Questions