Question

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

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

Answer 1

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

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

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

1 个答案: