Question 14911 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Show a div when two different radio groups are selected – Jquery

I am trying to display a hidden div when two different radio buttons are selected; the radio buttons are in different groups and have different IDs. So the user will select a specific radio button to be shown this content. I am hoping to achieve this with JQuery.

I want the user to be presented with specific DIV content when they make specific radio selections but in different radio groups. Help!

<script>
 $(document).ready(function () {
   $('[name="group1"], [name="group2"]').click(function(){
     if ($(this).attr("id") == "option1") && ($(this).attr("id") == "option2")
    {
       $('#test-display').show();
     } else {
       $("#test-display").hide();
       }
      });
   });
                           
  </script>
  <div id="test-display" class="text-white" style="display:none ;">
   PLEASE SHOW ME
   </div>
   
<div>
 <input type="radio" name="group1" id="option1">
  </div>
  <div>
<input type="radio" name="group2" id="option2">
   </div>
Tags:

2

Answers


  1. 0

    You can do this with just javascript without jQuery. (edit: I just meant to say that the same logic can be implemented in jQuery too if you only want to use that, but that’s not necessary here.)

    First you need to get those radio buttons you want when enabled should show the hidden div, add event listeners to them and check if both are enabled then change the css property of the hidden div.

    Check my example of code below:

    Say here when we select first radio button of group 1 and third radio button of group 2 then I should show the hidden div, otherwise I shouldn’t.

    $('input[type=radio]').on("change", buttonChanged);

function buttonChanged() {
  if ($("#group1_option1").is(':checked') && $("#group2_option3").is(':checked')) {
    $("#test-display").show();
  } else {
    $("#test-display").hide();
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div id="test-display" class="text-white" style="display:none;">
  PLEASE SHOW ME
</div>

<div>
  <span>Group 1:</span>
  <input type="radio" name="group1" id="group1_option1">
  <input type="radio" name="group1" id="group1_option2">
</div>
<div>
  <span>Group 2:</span>
  <input type="radio" name="group2" id="group2_option1">
  <input type="radio" name="group2" id="group2_option2">
  <input type="radio" name="group2" id="group2_option3">
</div>
    Login or Signup to reply.
  2. 0

    The above solution is perfectly valid, but if you want to use JQuery I raise you this solution:

    <div id="hidden_div" class="text-white" >
    <p>ALL RADIOS SELECTED</p>
</div>

<div>
    <input type="radio" name="group1" id="group1_radio1">
</div>
<div>
    <input type="radio" name="group1" id="group1_radio2">
</div>

<div>
    <input type="radio" name="group2" id="group2_radio1">
</div>
<div>
    <input type="radio" name="group2" id="group2_radio2">
</div>

<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        // hide the div
        $('#hidden_div').hide();
        // when all radio groups are selected, show the hidden div
        $('input[type=radio]').change(function () {
            // get the number of checked radio buttons in each group
            var group1 = $('input[name=group1]:checked').length;
            var group2 = $('input[name=group2]:checked').length;
            // if both groups have a radio button selected, show the div
            if (group1 > 0 && group2 > 0) {
                $('#hidden_div').show();
            }
        });
    });                    
</script>

    I added some extra radios for my testing, just to double check that any radio works. You had the right idea, but the JQuery implementation wasn’t spot on.

    I wrote comments on how my solution works but here is a quick recap.

    1. Instead of a style to hide the div, do it with JQuery right away
    2. When a radio changes, trigger the function
    3. Get each radio group and find their length (this lets us know if its selected or not)
    4. If the lengths are greater than 1, show it!
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search