Hide <td> with jquery based on input value

Question

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

<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>

this html is invalid. Td should be the child of tabla and tr — Anoop Joshi P
– Anoop Joshi P, Commented Sep 23, 2014 at 14:05
And it should be value="0" not value"0". Are you looking for this jsfiddle.net/j08691/zxpsd8x6/9? — j08691
– j08691, Commented Sep 23, 2014 at 14:07
Thx for your help, but can i also hide an class on the same command? I have a label stored in another td : jsfiddle.net/swcmp2ws/1 — user3906056
– user3906056, Commented Sep 23, 2014 at 15:36

Milind Anantwar · Accepted Answer · 2014-09-23 14:26:38Z

1

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()

edited Sep 23, 2014 at 14:26

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

answered Sep 23, 2014 at 14:14

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

evilunix Over a year ago

The question was how to hide the TD if the input value was zero, not if it had a particular name. Your code would actually incorrectly hide both TDs.

evilunix Over a year ago

This is still wrong. It needs to check if value="0" not if value="hideifvalue0"

evilunix Over a year ago

the question is poorly worded, but I'm guessing the name on the input is only there for illustrative purposes.

iCollect.it Ltd Over a year ago

@evilunix And the purpose of the hide/show buttons is? :)

evilunix Over a year ago

To hide the table cells who's child inputs have a value of zero. Why - who knows!

|

evilunix · Accepted Answer · 2014-09-23 14:10:29Z

0

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();
   });
});

answered Sep 23, 2014 at 14:10

evilunix

9606 silver badges11 bronze badges

2 Comments

Kshirodra Meher Over a year ago

What if there is one more input type= text. then this code will effect that input as well .. Isn't it ?

evilunix Over a year ago

Yes - it would, but given the example HTML, it shouldn't be a problem. We only need to have a selector as specific as is needed to solve the problem at hand.

Kshirodra Meher · Accepted Answer · 2014-09-23 14:31:06Z

0

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(); });

edited Sep 23, 2014 at 14:31

answered Sep 23, 2014 at 14:25

Kshirodra Meher

2481 gold badge3 silver badges11 bronze badges

2 Comments

evilunix Over a year ago

There is no need to iterate over the inputs, checking the value, when this can be incorporated into the actual jQuery selector.

Kshirodra Meher Over a year ago

Please check it and then down grade it. I have changed it :)

Collectives™ on Stack Overflow

Hide <td> with jquery based on input value

3 Answers 3

9 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related