创建一个显示/隐藏项目的复选框系统-如何

Creating A Checkbox System with Show/Hide of Entries - How To?

本文关键字：项目 复选框 系统 如何 隐藏 显示 一个 创建      更新时间：2023-09-26

所以，我所要做的就是为一系列表字段创建类。

每个类可以多次应用于每个表字段。

在Javascript中，我想创建一个与一系列复选框相关的脚本。当选中或取消选中每个复选框时，相关的类将消失。

例如：

<input type="checkbox" id="checkbox1" name="check" value="Number1" checked> Contents <br>
<input type="checkbox" id="checkbox2" name="check" value="Number2" checked> Contents <br>
<input type="checkbox" id="checkbox3" name="check" value="Number3" checked> Contents <br>
<input type="checkbox" id="checkbox4" name="check" value="Number4" checked> Contents <br>

然后，任何具有特定类的表字段都应该通过以下Javascript消失：

function topicSorter() {
    $("#Checkbox1").onclick = function () {if ($("#Checkbox1").checked) {$('.class1').show(); } else {$('.class1').hide(); }
        };
    $('.class1').show();   
}

我似乎只能在不使用jQuery的情况下实现这一点，只通过getElementById使用类，而不使用任何类似getElementByClassName的"类"变体。。。

它不起作用。

很抱歉，这些胡言乱语把互联网堵塞了。

将每个复选框中的值更改为数字1-4。然后尝试以下代码：

    $("input[type='checkbox']").change(function() {
        var value = $(this).attr("value");
        $('.class' + value).toggle(this.checked);
    });

现在，每当单击复选框、查找相应的值并隐藏或显示相关类时，此代码都会激发。

<input name="filter" type="checkbox" value="class-1" /> Class 1
<input name="filter" type="checkbox" value="class-2" /> Class 2
<input name="filter" type="checkbox" value="class-3" /> Class 3
<input name="filter" type="checkbox" value="class-4" /> Class 4

function SetFilter()
{
    var checked = new Array();
    $("input[type='checkbox'][name='filter']:checked").each(function(){
        checked.push("." + $(this).val());
    });    
    var value = checked.join(",");    
    $("tr").filter(":not(" + value + ")").hide();
    $("tr").filter(value).show();
}
$("input[type='checkbox'][name='filter']").change(SetFilter);
SetFilter();

http://jsfiddle.net/hunter/NxcPL/

相关文章：