Populate radio button if checkbox is checked in HTML/JavaScript

Question

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?

Why do your radio buttons have different name attributes? Radios are supposed to be used in groups, and a group is defined by giving the same name... — nnnnnn
– nnnnnn, Commented Apr 25, 2016 at 0:54
@TWFPSP I haven't written any JS code. I'm like totally new to JS. — user2201650
– user2201650, Commented Apr 25, 2016 at 0:56
@nnnnnn Ah! Okay! I'll change the name attribute to having the same one. — user2201650
– user2201650, Commented Apr 25, 2016 at 0:57
Stack Overflow is not a code writing service. Attempt to write the code yourself, and ask a question on here if you encounter a specific difficulty. — Natecat
– Natecat, Commented Apr 25, 2016 at 1:31

cssyphus · Accepted Answer · 2016-04-25 02:44:10Z

This answers the addition to your question.

Note that I used a couple of different methods of selecting the checkboxes / radio buttons. Really, there are two methods: select all at once, and select PD and ID separately.

Then, I showed a couple of different methods for deselecting the radio buttons: all radio buttons on the page, both radio buttons by specifying each ID...

Hopefully, as your project develops, you can review this answer and get new tips.

This is a useful resource regarding how to poll (select) different types of elements (e.g. by ID, by class, as a group, etc). Note that jQuery uses CSS selectors, so learning them is useful twice over.

$('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);
	}
   //This is one way (gets them all)
   var num = $("[type='checkbox']:checked").length;
	alert(num);
	//This is another (gets each group)
	var lenPD = $('input[class=pdcb]:checked').length;
	var lenID = $('input[class=idcb]:checked').length;
	alert(lenPD +' / '+ lenID);
  
	//All three below methods work - choose your favorite
	//if (num==0) $('#radio1,#radio2').prop('checked',false);
	//if (lenPD==0 && lenID==0) $('input:radio').prop('checked',false);
	if (lenPD==0 && lenID==0) $('#radio1,#radio2').prop('checked',false);
	
});

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

Updated jsFiddle Demo

cssyphus · Accepted Answer · 2016-04-25 01:15:36Z

0

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>

answered Apr 25, 2016 at 1:15

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

3 Comments

user2201650 Over a year ago

Thank you so much! This is exactly what I was looking for.

user2201650 Over a year ago

Sure, will do. Thanks again! :)

user2201650 Over a year ago

Hey, I updated my question using JS code that I wrote. Could you please help me for the updated question?

Severino Lorilla Jr. · Accepted Answer · 2016-04-25 01:07:15Z

0

Not sure if this will work, but is should give you an idea on what to do.. You can also try to add some toggle on the radio button and checkboxes if you want.

$(document).ready(function() {    
     $(":checkbox").change(function () {
         if($(this).is(":checked")) {
             var selection = $(this).parent().parent().prev().text();
             if(selection == "PD") 
                 $("#radio1").prop("checked", true);
             else
                 $("#radio2").prop("checked", true)
         }    
     });
});

edited Apr 25, 2016 at 1:07

answered Apr 25, 2016 at 0:58

Severino Lorilla Jr.

1,6474 gold badges20 silver badges34 bronze badges

2 Comments

Severino Lorilla Jr. Over a year ago

do some work, a little research and debug it then.. just a few changes and it should work as you need it.

Anna Over a year ago

I don't think someone will come up with everything done for you just like that since you haven't actually tried to write any JS code. This snippet should work for you with a few changes.

Paulo César Lima · Accepted Answer · 2016-04-25 01:43:22Z

A simple way is calling a function on onclick event passing the radio control id as a parameter. Below your code edited with the function.

<html>
<head>
    <script type="text/javascript">
        function checkRadio(checkBoxId) {
            var radio = document.getElementById(checkBoxId);
            if (!radio.checked)
                radio.checked = true;
        }

    </script>

    <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" onclick="checkRadio('radio1')">G1 PD1</li>
            <li><input type="checkbox" name="G1PD2" onclick="checkRadio('radio1')">G1 PD2</li>
        </ul>
        <p align="center"><u>ID</u></p>
        <ul>
            <li><input type="checkbox" name="G1ID1" onclick="checkRadio('radio2')">G1 ID1</li>
            <li><input type="checkbox" name="G1ID2" onclick="checkRadio('radio2')">G1 ID2</li>
        </ul>

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

Collectives™ on Stack Overflow

Populate radio button if checkbox is checked in HTML/JavaScript

Update

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related