Filtering more than one list item with “getElementsByTagName”?
Question
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>
<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>
1 answers
solution1
0 ACCPTED 2010-08-16 19:41:39
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Selecting more than one item from list
document.getElementsByTagName(“*”); returns more than one tag
getElementsByTagName: How to select more than one type of tag?
Model state is not valid, when list has more than one item
Autoplay more than one item?
Why is my radio button list selecting more than one item in the list?
adding more than one list item into List at a time when the items are generated dynamically (using NAPA)
jQuery append adds more than one item
How to search for more than one item with .filter()
Filtering by more than one property by a logical AND operation in javascript
Related Tags