Search code examples
javascripthtmljquerycheckboxradio-button

Populate radio button if checkbox is checked in HTML/JavaScript

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.

How can I write the jQuery or JavaScript code for this?

Update

Using @gibberish's answer, I was able to write this JS code:

<script>
    $('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);
}
  else
  {
    $('#radio1').prop('checked',false);
    $('#radio2').prop('checked',false);
  }
});
</script>

My new question is how do I deselect both the radio buttons if none of the checkboxes aren't checked?

Solution

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