CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Konrad
Konrad

Reputation: 158

Hide/Show table row(s) based on checkbox

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/

Upvotes: 1

Views: 3452

Answers (4)

blurfus
blurfus

Reputation: 14041

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

Upvotes: 0

mehdi
mehdi

Reputation: 1755

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

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 15122

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

Upvotes: 0

PSL
PSL

Reputation: 123739

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

Upvotes: 4

Related Questions