Reputation: 313
I'm trying to hide an entire row when there is input value = 0 inside the tr tag? In the example I'm trying to hide row 1,3,4 and display row 2 since the value of input = 1
Right now I'm hiding all tr's with the class hide-also and that is not what i want to accomplished.
http://jsfiddle.net/jmg2u98a/1/
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$('td:has(input[value=0]), .hide-also').hide();
});
$(".btn2").click(function () {
$('td:has(input[value=0]), .hide-also').show();
});
});
</script>
<table>
<tr class="hide-also">
<td>Row 1 Hide if value 0</td>
<td><input type="radio" name="hideifvalue0" value="0"/></td>
</tr>
<tr class="hide-also">
<td>Row 2 Show if value 1</td>
<td><input type="radio" name="hideifvalue0" value="1"/></td>
</tr>
<tr class="hide-also">
<td>Row 3 Hide if value 0</td>
<td><input type="radio" name="hideifvalue0" value="0"/></td>
</tr>
<tr class="hide-also">
<td>Row 4 Hide if value 0</td>
<td><input type="radio" name="hideifvalue0" value="0"/></td>
</tr>
</table>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
Upvotes: 0
Views: 114
Reputation: 5123
Try this:
$(document).ready(function () {
$(".btn1").click(function () {
$(".hide-also").each(function(){
if($(this).find("td input").val()==0)
$(this).hide();
});
});
$(".btn2").click(function () {
$('td:has(input[value=0]), .hide-also').show();
});
});
Upvotes: 1
Reputation: 780842
Search up the DOM for the containing tr
of the inputs with value=0.
$(".btn1").click(function () {
$("input[value=0]").closest("tr.hide-also").hide()
});
$(".btn2").click(function () {
$("input[value=0]").closest("tr.hide-also").show()
});
Upvotes: 1