CODEWITHSUNDEEP
javascript
A.Casa
A.Casa

Reputation: 65

Hide a table row when a checkbox is checked

I am testing this table and i am trying to hide some rows when a checkbox is checked.

For example in my case: when the checkbox 3.5 is cheked the table rows that contain Zimmer 2.5 and 4.5 are hidden.

Or for example if the checkbox 2.5 is cheked the table rows with Zimmer 3.5 or 4.5 are not visible.

I tried to give a checkbox a data-number but nothing...

I tried <input type="checkbox" data-number="3.5" />

Any ideas?

EDIT:

I tried something like this JS:

jQuery(document.body).on('change', "#row2", function() { 
jQuery("#tablepress-id-5 tr.row2").toggle(!this.checked); 
});

Upvotes: 0

Views: 345

Answers (3)

Suhail Akhtar
Suhail Akhtar

Reputation: 2033

Hi A Casa try this code

$('input[type=checkbox]').on('change',function(e){
v=$(this).val();
$('td:contains("+v+")').parent('tr').toggle()
})

Upvotes: 0

trajchevska
trajchevska

Reputation: 952

You should do it the other way around - the checkbox should have a value based on the number it represents and the table row can have a data attribute indicating the number of rooms.

<input type="checkbox" name="rooms_check" value="2">
<input type="checkbox" name="rooms_check" value="3">
<input type="checkbox" name="rooms_check" value="4">
<table>
    <tr data-number="2">
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
    <tr data-number="3">
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
</table>

Then with JS:

$('input[name="rooms_check"]').change(function(){
    $('input[name="rooms_check"]').each(function(){
        if(!$(this).prop('checked')) {
            $('tr[data="'+$(this).val()+'"]').hide();
        } else {
            $('tr[data="'+$(this).val()+'"]').show();
        }
    });
});

UPDATE:

Here's how you could do it without changing the table html.

$('input[name="rooms_check"]').change(function(){
    $('input[name="rooms_check"]').each(function(){
        if(!$(this).prop('checked')) {
            $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').hide();
        } else {
            $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').show();
        }
    });
});

Upvotes: 1

The Shooter
The Shooter

Reputation: 733

I believe some javascript should fire when you click the checkbox and make the expected rows disappear. Do you have the relevant javascript there?

Upvotes: 0

Related Questions