Show a div when two different radio groups are selected-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

<div id="hidden_div"  >
    <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.

Instead of a style to hide the div, do it with JQuery right away
When a radio changes, trigger the function
Get each radio group and find their length (this lets us know if its selected or not)
If the lengths are greater than 1, show it!

CodePudding user response：

You can use .toggle() by applying condition as a parameter in it.

Check below:

$('input[type=radio]').on('click', function() {
  $("#test-display").toggle(($("#option1").is(':checked') && $("#option2").is(':checked')));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<div>
  <span>Group 1:</span>
  <input type="radio" name="group1" id="option1">
</div>
<div>
  <span>Group 2:</span>
  <input type="radio" name="group2" id="option2">
</div>