Javascript 隐藏/显示带有复选框的类

Question

我刚学javascript，还请多多包涵!

我希望能够使用复选框来选择隐藏/显示 div 类(基本上过滤显示的信息量)。它在 this 中完成...但我试图找出更简单的方法(因为我不需要动态生成复选框选项。)

我遇到了这个例子:Javascript:

 function showMe (it, box) { 
   var vis = (box.checked) ? "block" : "none"; 
   document.getElementById(it).style.display = vis;
 } 

HTML

<form>
<input type="checkbox" checked="checked" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" checked="checked" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" checked="checked" value="value3" onclick="showMe('div3', this)" />value3
</form>

<div id="div1" style="display:block">Show Div 1</div>
<div id="div2" style="display:block">Show Div 2</div>
<div id="div3" style="display:block">Show Div 3</div>

</body>

</html>

但它只适用于 div id，不适用于类。关于我如何处理这个有什么想法吗？

如果您能帮助我，在此先感谢您!

Answer 1

目前，您可能最好使用像 Prototype 这样的库, jQuery , Closure ，或类似的东西，因为按类名查找元素的标准化(document.getElementsByClassName 方法)是相对较新的，并且至少一个主要浏览器还不支持它(它们 document a way添加它，但不是一个很好的)。

在 Prototype 中，$$ 函数搜索 the CSS3 selectors draft 的一个大子集。提议的建议。在 jQuery 中，$ 函数做很多相同的事情(通过 Sizzle 选择器引擎，它也可以单独使用，我们从 jQuery 中分离出来)。

在 Prototype 中，您可以按类显示或隐藏元素，如下所示:

$$('div.myClassName').invoke('hide'); // Hides all matches
$$('div.myClassName').invoke('show'); // Shows all matches

在 jQuery 中，它是:

$('div.myClassName').hide(); // Hides all matches
$('div.myClassName').show(); // Shows all matches