javascript - 选中复选框时隐藏表格行

Question

我正在测试这个table我试图在 checkbox 时隐藏一些行已选中。

例如，在我的例子中:当选中复选框 3.5 时，包含 Zimmer 2.5 和 4.5 的表行将被隐藏。

或者例如，如果选中复选框 2.5，则带有 Zimmer 3.5 或 4.5 的表行将不可见。

我试图给一个复选框一个数据编号，但什么也没有......

我试过<input type="checkbox" data-number="3.5" />

有什么想法吗？

编辑:

我尝试过这样的 JS:

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

Answer 1

您应该以相反的方式进行操作 - 复选框应该具有基于其代表的数字的值，并且表格行可以具有指示房间数量的数据属性。

<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>

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

更新:

以下是在不更改表格 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();
        }
    });
});