Question

I have the basic html structure:

<table>

  <tbody>
    <tr class="1">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is the first object </span> 
        </p>
      </td>
    </tr>

    <tr class="2">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is second object </span> 
        </p>
      </td>
    </tr>

    <tr class="3">
        <p style="font-size:large"> 
            <span class="muted"> this is the third object </span> 
        </p>
      </td>
    </tr>

</tbody>
</table>

and then I have check boxes, the functionality i want is,
if checkbox 1 is checked, only the tr with class 1 be displayed.

if checkbox 2 and 3 are clicked, the tr with class 1 gets hidden and 2, 3 show in the dom.

again if checkbox 2,*3* are unchecked and 1 is checked tr with class 2, 3 do not show and 1 is showed.

How can this be done in jQuery?

Answer 1

Here’s a solution using radios, since explanation seems to indicate you want a choice of either 2&3 or 1 to show. Radios cancel each other whereas checkboxes don’t.

If this is not behavior wanted you need to clarify your explanation

HTML:

<label>Show All<input type="radio" value="0" name="radio"></label>
<label>1<input type="radio" value="1" name="radio"></label>
 <label>2 &amp; 3<input type="radio" value="23" name="radio"></label>

JS

var rows = $('tr');

$(':radio').change(function() {
    var classNum = $(this).val();
    rows.hide();
    var toShow;
    if( classNum=='0'){
       toShow=rows;        
    }else{
        toShow = classNum=='1' ? rows.filter('.1') :  rows.not('.1');
    }
    toShow.show();
});

DEMO: http://jsfiddle.net/wGLfX/