CODEWITHSUNDEEP
javascriptjqueryhtml-table
user3906056
user3906056

Reputation: 313

Hide <td> with jquery based on input value

I would like to hide td if input value is 0 but I can't get it to work?

http://jsfiddle.net/zxpsd8x6/1/

<td><input type="radio" name="hideifvalue0" value"0"></td>
<td><input type="radio" name="hideifvalue0" value"1"></td>

<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<script>
 $(document).ready(function(){
 $(".btn1").click(function(){
 $("td").hide();
 });
 $(".btn2").click(function(){
 $("td").show();
 });
});
</script>

Upvotes: 0

Views: 683

Answers (3)

Kshirodra Meher
Kshirodra Meher

Reputation: 228

First of all your html elements are wrong. <td> should be inside <table><tr> like: <table> <tr> <td><input type="radio" name="hideifvalue0" value="0" /></td> <td><input type="radio" name="hideifvalue0" value="1" /></td> </tr> </table>

<button class="btn1">Hide</button> <button class="btn2">Show</button>

Then here your jQuery code goes:

$(".btn1").on('click', function () { $("input:radio[value='0']").parent().hide(); });

$(".btn2").on('click', function () { $("input:radio[value='0']").parent().show(); });

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Not the way I would recommend, but this fixes the selectors:

JSFiddle: http://jsfiddle.net/swcmp2ws/

$(document).ready(function () {
    $(".btn1").click(function () {
        $('td:has(input[value="0"])').hide();
               //or
        $('input[value="0"]').parent().hide();
    });
    $(".btn2").click(function () {
        $('td:has(input[value="0"])').show();
               //or
        $('input[value="0"]').parent().show();
    });
});

Notes:

  • Your HTML was invalid - added table and tr elements
  • You should just use classes on common elements for simpler selectors (e.g. class="hidethese") and $('.hidethese').hide()

Upvotes: 1

evilunix
evilunix

Reputation: 960

Change your HTML to:

<td><input type="radio" name="hideifvalue0" value="0"></td>
<td><input type="radio" name="hideifvalue0" value="1"></td>

Then your jQuery should be:

 $(document).ready(function(){
   $(".btn1").click(function(){
     $("input[value='0']").parent().hide();
   });
   $(".btn2").click(function(){
     $("input[value='0']").parent().show();
   });
});

Upvotes: 0

Related Questions