使用顯示/隱藏條目創建複選框系統 - 如何？

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/