Question

我正在尝试here仅在选中复选框时显示某些行。

例如，如果选中复选框2.5，则仅将包含2.5的行作为值。

我无法修改表格的HTML代码，我尝试了类似的结果：

JS

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

HTML :(我只能编辑<input> HTML）

<input type="checkbox" name="rooms_check" value="2.5">
<input type="checkbox" name="rooms_check" value="3.5">
<input type="checkbox" name="rooms_check" value="4.5">

任何提示？

PS：我正在使用Wordpress。

Answer 1

此代码应该有效：

$('input[name="rooms_check"]').change(
  function (){
    // a checkbox is clicked > display affected rows
    if(0<$('input[name="rooms_check"]:checked').length){
      // hide all rowsin body
      $('#tablepress-5 tbody tr').css('display', 'none');

      // display the rows with the correct values
      $('input[name="rooms_check"]').each(function(){
        if($(this).prop('checked')) {
          $('#tablepress-5 td:nth-child(2):contains("'+$(this).val()+'")').parent().css('display', 'table-row');
        }
      });
    }
    // no checkboxes clicked > display all rows
    else{
      $('#tablepress-5 tbody tr').css('display', 'table-row');
    }
});

小提琴：https://jsfiddle.net/5kt3fegy/
- 忽略html部分中小提琴示例中的onclick =“changeRows（）” - 它是我忘记删除的测试的代码 - ... - - ）

注意：我还添加了“没有激活复选框”的案例

JS：如果特定值在该行中，则显示特定的表行

1 个答案: