Фильтрация нескольких элементов списка с помощью getElementsByTagName? - PullRequest
Новая
       2

Фильтрация нескольких элементов списка с помощью getElementsByTagName?

0 голосов
/ 16 августа 2010

Как я могу отфильтровать более одного элемента списка с одним флажком? Спасибо. 

<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 Ответ

0 голосов
/ 16 августа 2010

Я могу подумать о том, чтобы использовать атрибут «id» для тегов «li» и управлять его видимостью с помощью атрибута события из соответствующего тега «input» (или из любого тега input). 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...