Search code examples
jquerycheckboxhtml-tablerowshow-hide

Show table row based on radio selected

Again, again, again...issues with my Javascript/jQuery knowledge. This time, I want to make a row appears when a radio value is selected. I'm lost on the part where I need to do the row appearing.

This is the row:

            <tr class="others" id="others" style="display:none;">
            <th colspan="2"><?php _e('Others', 'shop'); ?></th>
            <td><?php echo fee; ?>&nbsp;&euro;</td>
            </tr>

And this is the jquery:

      $(document).ready(function() {
      $('input').click(function(){
      var isChecked = $('#payment_method_paypal').prop('checked');
      // make the row appear appear if "payment_method_paypal" is checked
      });

I tried with alert and it's work, but with the row, I tried every single solution I found on Stack Overflow and on google, but couldn't make it work.

Solution

  • You can pass boolean to jquerys toggle method

    .toggle( showOrHide )

    A Boolean indicating whether to show or hide the elements.

    This should work

    var isChecked = $('#payment_method_paypal').prop('checked');
$('#others').toggle(isChecked); //show/hide based on the bool

    Fiddle