Home/ Questions/Q 1007893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:41:13+00:00

How can I filter more than one list item with one checkbox? Thanks. <html>

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0