当选中复选框时隐藏表格行

我正在测试这个table，我试图在选中checkbox时隐藏一些行。当选中复选框时隐藏表格行

例如在我的情况：当该复选框3.5 cheked表行包含齐默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); 
});

来源

2016-07-21 A.Casa

我相信当你点击复选框，使预期的行消失一些JavaScript应该解雇。你有相关的JavaScript吗？

来源

2016-07-21 06:09:17

对不起不知道JQuery的。只是一个想法，而不是document.body它可能是真正的复选框。 –

你应该反过来 - 复选框应该有一个基于它所表示的数值的值，并且表格行可以有一个数据属性来指示房间的数量。

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

UPDATE：

这里是你如何能做到这一点不改变表的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(); 
     } 
    }); 
});

来源

2016-07-21 06:21:34 trajchevska

感谢您的提示，但不幸的是我不能编辑HTML文件，我不能给'数据编号'值的行。在JS中是否有方法只读取并显示包含像3.5这样的期望值的行？ –

你可以，但是很不方便。让我更新答案。 – trajchevska

感谢您的编辑。而在这种情况下，我必须像这样'.val（2.5）'添加我的值？ –

喜卡萨试试这个代码

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

来源

2016-07-21 09:00:45

当选中复选框时隐藏表格行

回答

相关问题