Show/Hide divs based on radio button selection

Question

I've gotten as far as showing a certain div based on the selection of "150" and "3m" but I can't get the div to hide if both of those aren't selected?

Code below:

 $(document).ready(function() { $('input[value="100"], input[value="3m"]').change(function() { if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) { $('div').show(); } else { $('div').hide(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>100</label> <input class="amount" type="radio" name="amount" value="100" /> <label>150</label> <input class="amount" type="radio" name="amount" value="150" /> <br> <br> <label>3</label> <input class="month" type="radio" name="month" value="3m" /> <label>6</label> <input class="month" type="radio" name="month" value="6m" /> <div style="display: none;"> <div class="interest"> £40 </div> <div class="total-payable"> £140 </div> <div class="monthly-payment"> £46.67 </div> <div class="weekly-payment"> £10.77 </div> </div>

Answer 1

Currently you're only updating the visibility of the div elements when the 100 or 3m radio button is changed - you want to update the visibility of the div elements on any radio button change by changing your selector:

$('input[value="100"], input[value="3m"]')

to

$('input')

 $(document).ready(function() { $('input').change(function() { if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) { $('div').show(); } else { $('div').hide(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>100</label> <input class="amount" type="radio" name="amount" value="100" /> <label>150</label> <input class="amount" type="radio" name="amount" value="150" /> <br><br> <label>3</label> <input class="month" type="radio" name="month" value="3m" /> <label>6</label> <input class="month" type="radio" name="month" value="6m" /> <div style="display: none;"> <div class="interest"> £40 </div> <div class="total-payable"> £140 </div> <div class="monthly-payment"> £46.67 </div> <div class="weekly-payment"> £10.77 </div> </div>

Answer 2

For radio buttons, the change event is only triggered when the button gets checked, not when it gets unchecked.

A possible solution is to bind the change event to all (involved) inputs.

 $(document).ready(function() { $('input').change(function() { if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) { $('div').show(); } else { $('div').hide(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>100</label> <input class="amount" type="radio" name="amount" value="100" /> <label>150</label> <input class="amount" type="radio" name="amount" value="150" /> <br><br> <label>3</label> <input class="month" type="radio" name="month" value="3m" /> <label>6</label> <input class="month" type="radio" name="month" value="6m" /> <div style="display: none;"> <div class="interest"> £40 </div> <div class="total-payable"> £140 </div> <div class="monthly-payment"> £46.67 </div> <div class="weekly-payment"> £10.77 </div> </div>

Answer 3

I would do it like the following using the filter function and the :checked selector:

 // wrap in closure $(function() { // store these in variables for better performance var month = $('.month'), amount = $('.amount'), toggleDiv = $('#toggle-div'); // give top level div to show an id rather than toggling all divs // use common class on radios you want to bind the event to $('.radio').on('change', function() { if (amount.filter(':checked').val() == 100 && month.filter(':checked').val() === "3m") { toggleDiv.show(); } else { toggleDiv.hide(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>100</label> <input class="amount radio" type="radio" name="amount" value="100" /> <label>150</label> <input class="amount radio" type="radio" name="amount" value="150" /> <br> <br> <label>3</label> <input class="month radio" type="radio" name="month" value="3m" /> <label>6</label> <input class="month radio" type="radio" name="month" value="6m" /> <div id="toggle-div" style="display: none;"> <div class="interest"> £40 </div> <div class="total-payable"> £140 </div> <div class="monthly-payment"> £46.67 </div> <div class="weekly-payment"> £10.77 </div> </div>

Answer 4

You need to put all the radio buttons id or name to do the functionality

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" id="100rad"/>
<label>150</label>
<input class="amount" type="radio" id="150rad"name="amount" value="150" />

<br><br>

<label>3</label>
<input class="month" type="radio" id="3mrad" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" id="6mrad" value="6m" />

<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

js

$(document).ready(function() {
  $('#3mrad, #150rad,#100rad,#6mrad').change(function() {
    if ($('#150rad').is(':checked') && $('#3mrad').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

check the fiddle and let me know that it is what you required or not

Fiddle

Answer 5

$(document).ready(function(){
    $("input[type='button']").click(function(){
        var radioValue = $("input[name='gender']:checked").val();
        if(radioValue){
            alert("Your are a - " + radioValue);
        }
    });
   if(radioValue=='male'){
     $("#divMale").show();
     $("#divFemale").hide();
   } 
   else{
     $("#divMale").hide();
     $("#divFemale").show();
   }
});

Answer 6

Use the following javascript code instead. . .set change listener on input[name="month"], input[name="amount"]

$(document).ready(function() {
  $('input[name="month"], input[name="amount"]').change(function() {
  console.log("haha")
    if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

Answer 7

If you are using bootstrap css, you can even make the code much more portable.

$(document).ready(function () {
    $('input.rbtoggle').change(function () {
        $('div.dvtoggle').toggleClass('d-none');
    });
});

where 'rbtoggle' is just a class your radio buttons share, while 'dvtoggle' is a class the div to show or hide uses.

If you want the div hidden initially, add the class 'd-none' to it. Eg

<div class'dvtoggle d-none'>
    <!-- other html goes here -->
</div>