使用复选框排序 Table：内容不再可见

Question

这是 table 的 HTML 和我正在尝试的 JS 代码。基本上单击一个复选框会出现另一个 table：

<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>

<script>

 $('input.unchecked').on('change', function() {
 $('input.unchecked').not(this).prop('checked', false);  
});

</script>


<script>

$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked); 
});

    $("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked); 
});

    $("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked); 
});

    $("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked); 
});

</script>

但是点击 table 就会消失。

Answer 1

每个复选框过滤具有特定 class 的行，这意味着当您选中第一个复选框然后单击另一个复选框时，第二个复选框无法找到它正在搜索的具有 class 的行，我的意思是，当您选中一个复选框然后选中另一个复选框时，.on(change) 方法仅管理复选框检查，而不删除过滤...

$('input.unchecked').on('change', function() {
 $('input.unchecked').not(this).prop('checked', false);  

});

您应该在进行任何新的过滤之前重置过滤的行...

function restRows(){
$('#tableID tr').filter(function() {
   return $(this).css('display') == 'none';
}).show();
}

并在像这样的任何过滤之前调用它：

    $("#checkbox3OG").change(function(){

    //reset all hidden rows
    restRows();

    //filter new rows
    $("#tableID tr.row3OG").hide();
});

Answer 2

如果您有一个复选框 select，然后您 select 另一个，但没有手动取消 select 前一个复选框，就会出现此问题。否则效果很好。

我建议你定义一个这样的函数：

function restore_table() {
    $("#tableID tr.rowEG").toggle(true);
    $("#tableID tr.row1OG").toggle(true);
    $("#tableID tr.row2OG").toggle(true);
    $("#tableID tr.row3OG").toggle(true);
}

然后您可以在操作 table 行之前对每个单独的 change() 调用调用此函数。例如：

// Do this with the four change calls
$("#checkboxEG").change(function(){
    restore_table();
    $("#tableID tr.rowEG").toggle(!this.checked); 
});

使用复选框排序 Table：内容不再可见

Sorting Table with checkbox: content is not visible anymore

javascript

checkbox

tabular