user2201650 user2201650 - 7 months ago 7
Javascript Question

HTML/JavaScript - Populate radio button if checkbox is checked

I'm trying to write a JavaScript code where if any of the checkboxes in a certain group are selected, then a radio button should get populated.

Following is the code that I'm working on:

<html>
<head>
<title>Radio buttons and checkboxes</title>
</head>

<body>
<form>
<h3>Radio Buttons</h3>
<input type="radio" name="radio1" id="radio1"> Radio 1
<br>
<input type="radio" name="radio2" id="radio2">Radio 2
<br>
<br>

<h3>Checkbox Groups</h3>

<h4><u>Group 1</u></h4>
<p align="center"><u>PD</u></p>
<ul>
<li><input type="checkbox" name="G1PD1">G1 PD1</li>
<li><input type="checkbox" name="G1PD2">G1 PD2</li>
</ul>
<p align="center"><u>ID</u></p>
<ul>
<li><input type="checkbox" name="G1ID1">G1 ID1</li>
<li><input type="checkbox" name="G1ID2">G1 ID2</li>
</ul>

<h4><u>Group 2</u></h4>
<p align="center"><u>PD</u></p>
<ul>
<li><input type="checkbox" name="G2PD1">G2 PD1</li>
<li><input type="checkbox" name="G2PD2">G2 PD2</li>
</ul>
<p align="center"><u>ID</u></p>
<ul>
<li><input type="checkbox" name="G2ID1">G2 ID1</li>
<li><input type="checkbox" name="G2ID2">G2 ID2</li>
</ul>
</form>
</body>
</html>


Here's what I want the JavaScript to do. If any of the checkboxes under
PD
section in Groups 1 and 2 are checked, then the radio button
Radio 1
should get populated. Similarly, if any of the checkboxes under the
ID
section in Groups 1 and 2 are selected, then the radio button
Radio 2
should get populated.

If anyone could help me write a jQuery or JavaScript code, that would be very helpful.

Thanks in advance!

Answer

If you assign distinct classnames to your two checkbox groups, it will be easier to determine what to do.

Here is a code sample, both in stack code snippet, and as a jsFiddle Demo (because they are easier for you to fiddle around with)

$('input:checkbox').click(function(){
	var cc = this.className;
	if (cc=="pdcb"){
		$('#radio2').prop('checked',false);
		$('#radio1').prop('checked',true);
	}else if (cc=="idcb"){
		$('#radio1').prop('checked',false);
		$('#radio2').prop('checked',true);
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>

   <h3>Checkbox Groups</h3>

   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD1">G1 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD2">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G1ID1">G1 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G1ID2">G1 ID2</li>
   </ul>

   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD1">G2 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD2">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G2ID1">G2 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G2ID2">G2 ID2</li>
   </ul>
</form>