用“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>
答
我能想到的就是用“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/wTLWE/ – 2010-08-16 15:57:38
不,我只想一次过滤多个列表项。 – cbeezy 2010-08-16 16:18:04
你说“你想要过滤多个物品”是什么意思?通过观察你的脚本隐藏了相应复选框未选中的所有'li'元素。应该发生什么?另外,'li'元素只能像'ul'这样的列表元素的子元素有效。 – lincolnk 2010-08-16 19:14:47