0

In this bellow program i'am displaying the table rows if and only if the related checkboxes are checked. And i'm hiding table rows if and only if the related check boxes are not checked.

This is my check box definition:

 <div id="cb"> <input type="checkbox" value="air india"> <input type="checkbox" value="king fisher"> <input type="checkbox" value="Go Air"> </div>

Example: If i click on first check box, the table row which contains the value 'air india' will display. If i uncheck that will hide.

Here hiding is working well, but display is not working properly.It is missing inner table. Bellow is my code.

 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { function inArray(haystack, needle) { var found = false; $.each(haystack, function(i, elem) { if(elem === needle) { found = true; return false; } }); return found; } $("#cb").find('input:checkbox').click(function() { var myArray =new Array(); $("#cb").find('input:checkbox').each(function(index) { if($(this).attr("checked")==true) { myArray.push($(this).val()); } }); $('#abc tr').each(function() { var td = $('> td:nth-child(2)', this); if(!inArray(myArray, td.text())) { $(this).hide(); } else { $(this).show(); } }); }); }); </script> <table id="abc" border="1"> <tr > <td></td> <td>air india</td> <td> <table> <tr> <td>Hai</td> </tr> </table> </td> </tr> <tr> <td></td> <td>king fisher</td> <td> <table> <tr> <td>Hai</td> </tr> </table> </td> </tr> <tr> <td></td> <td>Go Air</td> <td> <table> <tr> <td>Hai</td> </tr> </table> </td> </tr> </table> <div id="cb"> <input type="checkbox" value="air india"> <input type="checkbox" value="king fisher"> <input type="checkbox" value="Go Air"> </div>
Improve this question
1
  • Are you sure the .attr("checked") is returning the correct value? Commented Aug 23, 2011 at 12:17

4 Answers 4

Reset to default
2

This should be as easy as:

$('#cb > input:checkbox').click(function(){ $('#abc').find('tr:contains("' + $(this).val()+ '")').toggle(this.checked); })

Live example: http://jsfiddle.net/q5rVE/

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

2 Comments

Thanks Jamiec. Great code. But i cant understand that why my program is not working. Inner table is also in one of the mail <td> s. Why it is not working
This works until you decide you want a name 'Go Air' somewhere in the details of 'air india'. the table didn't show up because all it's tr's were hidden, the table itself was visible.
0

i think you r always returning false from this function

function inArray(haystack, needle) { var found = false; $.each(haystack, function(i, elem) { if(elem === needle) { found = true; return false; } }); return found; }

i think the might like this

 if(elem === needle) { found = true; return found; }
Improve this answer

Comments

0

I'd start with using the jQuery.inArray()-function in stead of making your own.

But that isn't your problem, $('#abc tr') also selects the tr's in your inner tables, and hides them directly.

Improve this answer

Comments

0

is this of any help?

<div id="cb"> <input type="checkbox" id="air-india-box" value="air india"> <input type="checkbox" id="king-fisher-box" value="king fisher"> <input type="checkbox" id="go-air-box" value="Go Air"> </div> <p id="air-india"><br />Air India <br />Hai<br /><br /></p> <p id="king-fisher"><br />King Fisher <br />Hai<br /><br /></p> <p id="go-air"><br />Go Air <br />Hai<br /><br /></p> $('#air-india').hide(); $('#king-fisher').hide(); $('#go-air').hide(); $("#air-india-box").click(function () { $("#air-india").toggle(); }); $("#king-fisher-box").click(function () { $("#king-fisher").toggle(); }); $("#go-air-box").click(function () { $("#go-air").toggle(); });

JSFiddle: http://jsfiddle.net/z29W3/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.