Filtering more than one list item with "getElementsByTagName"?
How can I filter more than one list item with one checkbox? Thanks.
<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>
<f开发者_运维问答orm 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>
What I can think of is to use the "id" attribute for the "li" tags and control its visibility by an event attribute from its relevant "input" tag (or from any input tag).
<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>
ref: http://jsfiddle.net/TdCDW/
加载中,请稍侯......
精彩评论