CODEWITHSUNDEEP
javascriptjquery
softboxkid
softboxkid

Reputation: 908

Hide/Show table TR based on selected radio button - jquery

This is my html:

<input id="source" type="radio" name="source" value="1" />
<input id="source" type="radio" name="source" value="2" checked="" />

<table id="dataList">
  <tr row='12'><td>this is row 12</td></tr>
  <tr row='13'>
     <td>
         <input id="item" type="radio" name="item" value="1" />
         <input id="item" type="radio" name="item" value="2" />
     </td>
  </tr>
  <tr row='14'><td>this is row 14</td></tr>
</table>

any my jquery:

jQuery(document).ready(function() {
  jQuery('input[name=source]').click( function() {
    if(jQuery('input[value=1]').is(':checked')) {
        jQuery('#dataList tr[row=13]').show();

    } else if(jQuery('input[value=2]').is(':checked')) {
        jQuery('#dataList tr[row=13]').hide();
    }
  })
})

Supposedly when the page loaded, the tr row='13' will be hide if the radio button id=source with value=2 is checked. but it not happen as expected. Please help me.

Upvotes: 0

Views: 1828

Answers (2)

Chaddoy
Chaddoy

Reputation: 41

You could change your target. I don't know what its called but this thing $('TARGET').
Since you have 2 inputs that has a value of 1.
See the following,
<input id="source" type="radio" name="source" value="1" />
and
<input id="item" type="radio" name="item" value="1" />.
It may cause overwriting of commands.

Upvotes: 2

Chaddoy
Chaddoy

Reputation: 41

You can try
$('tr[row="13"]').hide();
right after ng jQuery(document).ready(function() {
since you said 'when the page loaded'.

Upvotes: 2

Related Questions