物品如何消失并显示在选择/取消选择复选框上？

Question

如何使用jquery在复选框上单击事件时隐藏/显示网页上的项目（假设有多个复选框及其相关项目）？

Answer 1

页面中的一些javascript代码等待页面加载，然后在复选框中注册点击事件，并且当复选框的值更改时，代码将查看当前值，然后隐藏/显示其他项目在网页上。

在某些情况下，它甚至可能会向服务器发送ajax调用以获取新内容，然后将该内容插入到页面中。

在jQuery中，你可以这样做：

$(document).ready(function() { 
    $("#showRelatedItems").click(function() { 
     $(".relatedItems").toggle($(this).prop("checked")); 
    }); 
}); 

这与id="showRelatedItems复选框，并class="relatedItems"一组相关项目的工作。

工作演示：http://jsfiddle.net/jfriend00/egYJj/