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

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

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

来源

2010-08-16 cbeezy

你说的是让他们垂直对齐，这样的吗？ http://jsfiddle.net/wTLWE/ – 2010-08-16 15:57:38

不，我只想一次过滤多个列表项。 – cbeezy 2010-08-16 16:18:04

你说“你想要过滤多个物品”是什么意思？通过观察你的脚本隐藏了相应复选框未选中的所有'li'元素。应该发生什么？另外，'li'元素只能像'ul'这样的列表元素的子元素有效。 – lincolnk 2010-08-16 19:14:47

我能想到的就是用“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/

来源

2010-08-16 19:41:39 nibin012

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

回答

相关问题