CODEWITHSUNDEEP
jquerycheckboxhtml-tablerowshow-hide
demlasjr
demlasjr

Reputation: 121

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.

Upvotes: 0

Views: 1513

Answers (3)

Anton Baksheiev
Anton Baksheiev

Reputation: 2251

html

<table>
<tr> <td>-------------------</td></tr>
<tr> <td class="trData">-------SHOW------</td></tr>
<tr> <td>-------------------</td></tr>
</table>

<div id="container">
  <input type="radio" name="colors" id="red" value="show" checked/>Show<br />
  <input type="radio" name="colors" id="blue" value="hide" />Hide<br />
</div>

JS

$("#container").find("input[type=radio]:checked").on("click", function() {
    if($(this).attr('value')=='show')
    {
        $(".trData").show()
    }else{
        $(".trData").hide()
    }
});​

JS2 more compact, but in this case you need set correct value in your radio buttons

$("#container").find("input[type=radio]:checked").on("click", function(event) {
    var op= $(this).attr('value');
    jQuery.globalEval('$(".trData").'+op+'()')
});​

DEMO

​

Upvotes: 1

Johan
Johan

Reputation: 35194

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

Upvotes: 3

Robusto
Robusto

Reputation: 31883

Try 

$('#others').hide();

and

$('#others').show();

to hide and show that row.

Upvotes: 1

Related Questions