Hide/Show table row(s) based on checkbox

Question

I have a dynamic list of dates. I want to create a checkbox for each unique date, and then list all dates in a table row format below. The goal is when a checkbox is checked/unchecked, any rows with a class the same as the checkbox value will hide/show.

Any help is appreciated.

$('input[type = checkbox]').change(function () {
    var self = this;
    $(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});





<div class="widget">
    <div class="rowElem noborder">
        <div class="formRight">
            <label>
                <input type="checkbox" class="show" value="2013-11-15" checked />2013-11-15</label>
        </div>
        <div class="formRight">
            <label>
                <input type="checkbox" class="show" value="2013-11-17" checked />2013-11-17</label>
        </div>
        <div class="formRight">
            <label>
                <input type="checkbox" class="show" value="2013-11-20" checked /> 2013-11-20</label>
        </div>
    </div>
</div>
<table>
    <tbody>
        <tr class="2013-11-15">
            <td>2013-11-15</td>
        </tr>
        <tr class="2013-11-15">
            <td>2013-11-15</td>
        </tr>
        <tr class="2013-11-20">
            <td>2013-11-20</td>
        </tr>
        <tr class="2013-11-15">
            <td>2013-11-15</td>
        </tr>
        <tr class="2013-11-17">
            <td>2013-11-17</td>
        </tr>
        <tr class="2013-11-20">
            <td>2013-11-20</td>
        </tr>
    </tbody>
</table>

Fiddle: http://jsfiddle.net/fEM8X/9/

Demo jsfiddle.net/fEM8X/19

OnengLar
– OnengLar

2013-11-22 19:08:39 +00:00
Commented Nov 22, 2013 at 19:08 — OnengLar
– OnengLar, Commented Nov 22, 2013 at 19:08

PSL · Accepted Answer · 2013-11-22 18:57:38Z

4

Closest will select the ancestor or self (first one that matches the selector), but you want to select the sibling of ancestor (.widget) of the checked check box. So Try:

$('input[type = checkbox]').change(function () {
    var self = this;
     $(self).closest('.widget').next('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});

Demo

But in this case you can just do the following since you use the same classes for the targets:

 $('.' + this.value).toggle(self.checked);

Demo

answered Nov 22, 2013 at 18:57

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Venkata Krishna · Accepted Answer · 2013-11-22 18:59:59Z

0

Use this.value of the checked box and use it as class to toggle. You could simply do this.

$('input[type = checkbox]').change(function () {
    var myclass = this.value;
    $('.' + myclass).toggle();
});

jsFIDDLE DEMO

answered Nov 22, 2013 at 18:59

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

Comments

mehdi · Accepted Answer · 2013-11-22 19:03:52Z

0

you can just add a css to tr, see this DEMO

$('input[type="checkbox"]').change(function () {    
    var self = this;
    $("table tr."+$(this).val()).css({display: self.checked?"block":"none"});
});

answered Nov 22, 2013 at 19:03

mehdi

1,7552 gold badges15 silver badges21 bronze badges

Comments

blurfus · Accepted Answer · 2013-11-22 19:07:44Z

0

I updated your fiddle

Basically, your selectors were not correct:

$('input[type = checkbox]').change(function () {
    var valu = $(this).val();
    var ischecked = $(this).is(":checked");

    if( ischecked ){
        $('.' + valu).show();
    }else{
        $('.' + valu).hide();
    }
});

answered Nov 22, 2013 at 19:07

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

Collectives™ on Stack Overflow

Hide/Show table row(s) based on checkbox

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related