CODEWITHSUNDEEP
javascriptjquery
user3767554
user3767554

Reputation: 147

Show different table id based on radio button selection JS

I am trying to show a different table id based on radio button selection. I have made a start but really cannot see where I am going wrong with the IF STATEMENT.

The table should change based on radio button selection. Any help would be very appreciated. thanks

<tr>
    <td>Select An Option:</td>
    <td>
        <div>
            <input id="selection1" type="radio" name="group1" value="charge" checked="checked">
            Charge me
            </option></br>

            <input id="selection2" type="radio" name="group1" value="charge1">
            another option, no display
            </option><br/>    

            <input id="selection3" type="radio" name="group1" value="charge2" >    
            another option, no display 
            </option><br/>   
        </div>
    </td>
</tr>

<script>
    $(document).ready(function() {
        $('input[name="group1"]').change(function(){
            if ($(this).val() == "charge") {
                $('#charge').css('display', 'inline');
            }
            else if ($(this).val() == "charge1") {
                $('#charge1').css('display', 'inline');
            }
            else if ($(this).val() == "charge2")
            {
                $('#charge2').css('display', 'inline');
            }
        });
    });
</script>

<table id="charge"></table>
<table id="charge1"></table>
<table id="charge2"></table>

Upvotes: 1

Views: 2676

Answers (3)

Ant
Ant

Reputation: 338

Just further to Petes answer, this is how I would of achieved it

$("input[type=radio]").change(function(){
   var tableId  = $("input[type=radio][id="+ this.id + "]").val();
    
     $("#charge1").css('display', 'none');
     $("#charge").css('display', 'none');
     $("#charge2").css('display', 'none');
    
    $("#" + tableId).css('display', 'inline');
    
});
<div>
  <input id="selection1" type="radio" name="group1" value="charge">Charge me
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">another option, no display
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">another option, no display
  <br/>
</div>


<table id="charge" class="charge-table">
  <tr>
    <td>charge</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr>
    <td>charge 1</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr>
    <td>charge 2</td>
  </tr>
</table

See JsFiddle: https://jsfiddle.net/wfpfg2gu/1/

Upvotes: 0

Rajan Goswami
Rajan Goswami

Reputation: 769

Please try the following solution:

$(document).ready(function() {
        $('input[name="group1"]').change(function(){
            if ($("input[name='group1']:checked").val() == "charge")
          {
            $('#selection1').css('display', 'inline');
           }

            else if ($("input[name='group1']:checked").val() == "charge1")
           {
            $('#selection2').css('display', 'inline');
          }

            else if ($("input[name='group1']:checked").val() == "charge2")
          {
            $('#selection3').css('display', 'inline');
          }

        });
     });

Upvotes: 0

Pete
Pete

Reputation: 58432

First I would fix your html for the inputs - you have closing option tags and a br that has the backslash in the wrong place.

Next I would give all your charge tables a class and then you can use the value of the radio to show the table you want to.

var tables = $('.charge-table');
$('input[name="group1"]').on('change', function() {
  tables.hide();
  $('#' + $(this).val()).show();
});
.charge-table {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="selection1" type="radio" name="group1" value="charge">Charge me
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">another option, no display
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">another option, no display
  <br/>
</div>


<table id="charge" class="charge-table">
  <tr>
    <td>charge</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr>
    <td>charge 1</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr>
    <td>charge 2</td>
  </tr>
</table>

Upvotes: 1

Related Questions