使用显示/隐藏条目创建复选框系统 - 如何？

Question

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

每个类都可以应用到每个表字段不止一次。

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

它不工作。

对不起，用这些废话的堵塞这个互联网。

Answer 1

更改值在每个复选框是数字1-4。那就试试下面的代码：

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

     $('.class' + value).toggle(this.checked); 
    }); 

该代码现在每次点击复选框一次火，找到对应的值，隐藏或显示相关类。

Answer 2

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