Javascript 带复选框的排序表：内容不再可见

这是一个表的HTML和我正在尝试的JS代码。基本上，单击复选框将显示另一个表：

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

---

但单击后，表将消失。

每个复选框都会筛选具有特定类的行，这意味着当您选中第一个chckbox，然后单击另一个chckbox时，第二个复选框无法找到具有它正在搜索的类的行，我的意思是，当您选中一个复选框，然后选中另一个复选框时，.onchange方法，仅管理复选框检查，而不删除筛选

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

});

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

在执行任何新筛选之前，应重置筛选行

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

---

如果选中了一个复选框，然后选择另一个复选框，而没有手动取消选择上一个复选框，则会出现此问题。否则它工作得很好

我建议您定义如下函数：

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

然后，在操作表行之前，可以对每个单独的更改调用调用此函数。例如：

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

---

欢迎来到StackOverflow。请看一下这本书。我特别推荐看@A.Developer一节，请原谅我匆忙使用手机的复制粘贴。我已经纠正了我在示例函数中犯的错误，并提供了更多示例。请检查。我用你的代码编辑了第一篇文章，但不起作用。还是我做错了？@A.Developer这次我手头有电脑，可以用它进行测试。我的密码错了。我已经编辑了答案。现在它可以工作了。这次我已经测试过了。在我制作的自定义函数中，只需将false替换为trueHi：这对1OG、2OG和3OG非常有效，但不适用于EG复选框。为什么？@A.Developer在问题中，您有一个In$checkboxID.change，它应该是$checkboxEG。如果你的网站源代码中也有这种输入错误，那就是原因。