Javascript change class according radio button

Question

I'm trying to change some pricing tables according the option provided by the user.

For example, if he chooses 36 Months and Monthly, it will show a div (display: block;) and for the other options, 6 in total.

I was trying to follow this answer here but it will not work.. Any advise please? My goal it's to make a function that onChange/onClick it will show the divs, only after the 2 options selected.

<table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
        24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr>
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>

<div class="filter-24-m">24 m</div>
<div class="filter-24-y">24 y</div>
<div class="filter-36-m">36 m</div>
<div class="filter-36-y">36 y</div>
<div class="filter-48-m">48 m</div>
<div class="filter-48-y">48 y</div>

Thank you so much!

Answer 1

You can do it with one function. The divs are shown only after the 2 options selected.

Try something like this :

$(document).ready(function() {
  
  $('input[name=abrechnung]').change(function() {
    var laufzeit = $('input[name=laufzeit]:checked').val();
    if(laufzeit.length > 0) {
      var abrechnung = $('input[name=abrechnung]:checked').val();
      $('.content').hide();
      $('.' + laufzeit + '-' + abrechnung).show();
    }
  });

  $('input[name=laufzeit]').change(function() {
    $('input[name=abrechnung]').prop('checked', false);
    $('.content').hide();
  });
  
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
        24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr>
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>
</table>
<div class="content 24-m-monthly" style="display:block">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>

Answer 2

I'd do it by giving the radio's classes and check for any change in the class like so:

<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
        24 Months</label>

Then you can check for any changes to show and hide the respective divs.

 var laufzeit;
var abrechnung;
$(".laufzeit").change(function(){
    laufzeit = $(this).attr('value');
    if(abrechnung == ""){return}
    else{
       $('.show').hide();
       $('.'+abrechnung + '-' + laufzeit).show();
       $('.'+abrechnung + '-' + laufzeit).addClass('show');
    }

});
$(".abrechnung").change(function(){
    abrechnung = $(this).attr('value');
    if(laufzeit == ""){return}
    else{
       $('.show').hide();
       $('.'+abrechnung + '-' + laufzeit).show();
       $('.'+abrechnung + '-' + laufzeit).addClass('show');
    }

});

With the rest looking like so:

    <table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
            24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr >
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" class="abrechnung" value="monthly" id="abrechnung_0">
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" class="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>

</table>
<div class="content 24-m-monthly show">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>

Answer 3

You can have similar code for other radiobuttons also

$("#laufzeit_0").change(function(){
    if($(this).is(":checked")){
        if($("#abrechnung_0").is(":checked")){
            $("div.YOUR_DIV_CLASS").show();
        }
    }
});