使用“getElementsByTagName”过滤多个列表项？答案

【问题标题】：Filtering more than one list item with "getElementsByTagName"?使用“getElementsByTagName”过滤多个列表项？
【发布时间】：2010-08-17 03:41:39
【问题描述】：

如何用一个复选框过滤多个列表项？谢谢。

<html>

<head>
<script type="text/javascript">
<!--
window.onload=function()
{
    document.getElementById('onclick').onclick=function()
    {
    var check=document.getElementsByTagName('input'),
    lis=document.getElementsByTagName('li'),i=0;

for(var i;i<check.length,i<lis.length;i++)
    {
    lis[i].style.display='none';
    if(check[i].type=='checkbox')
        {
        if(check[i].checked==true)
        lis[i].style.display='';
        }}}}
//-->
</script>
</head>

<body>

<form style="width:600px;">

<div style="width:600px">

<div style="float:right; width:200px;">
<li>Red</li>
<li>Black</li>
<li>Green</li>
<li>Yellow</li>
<li>Blue</li>
<li>White</li>

<br>
</div>

<div>
<input type="checkbox"/><label>Red</label>
<br>
<input type="checkbox"/><label>Black</label>
<br>
<input type="checkbox"/><label>Green</label>
<br>
<input type="checkbox"/><label>Yellow</label>
<br>
<input type="checkbox"/><label>Blue</label>
</div>
<input type="checkbox"/><label>White</label>
<br>
<br>


<input type="button" name="onclick" id="onclick" value="Submit">
<br>
</div>
</form>
</body>

【问题讨论】：

你是说让它们垂直排列，像这样吗？ jsfiddle.net/wTLWE
不，我只想一次过滤多个列表项。
您说要“过滤多个项目”是什么意思？通过观察，您的脚本会隐藏所有未选中相应复选框的 li 元素。应该发生什么？此外，li 元素仅作为 ul 等列表元素的子元素有效。

标签： javascript checkbox filter

【解决方案1】：

我能想到的是为“li”标签使用“id”属性，并通过其相关“input”标签（或任何输入标签）的事件属性控制其可见性。

<script>
  function processme(id_chk, id_li){
        var li = document.getElementById(id_li)
        //1. Add more list elements here if required OR
        //2. do a getElementByTagName and negate li
        if (document.getElementById(id_chk).checked == true) li.style.visibility = ''
        else li.style.visibility = 'hidden'  
    }
</script>

<form style="width:600px;">

    <div style="width:600px">

        <div style="float:right; width:200px;">
            <li id="red_li">Red</li>
            <li id="black_li">Black</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Blue</li>
            <li>White</li>

            <br>
        </div>

        <div>
            <input type="checkbox" id="red_chk" onclick="javascript:processme('red_chk', 'red_li')" /><label>Red</label>
            <br>
            <input type="checkbox" id="black_chk" onclick="javascript:processme('black_chk', 'black_li')" /><label>Black</label>
            <br>
            <input type="checkbox"/><label>Green</label>
            <br>
            <input type="checkbox"/><label>Yellow</label>
            <br>
            <input type="checkbox"/><label>Blue</label>
        </div>
        <input type="checkbox"/><label>White</label>
        <br>
        <br>


        <input type="button" name="onclick" id="onclick" value="Submit">
        <br>
    </div>
</form>

参考：http://jsfiddle.net/TdCDW/

【讨论】：