JQuery Показать divs по нажатию CheckBox - PullRequest
0 голосов
/ 11 августа 2011

Вот код, который я придумал, благодаря предложениям ниже. Большинство из них почти работали так, как предлагалось, но никто не пережил контакта с реальным миром. Вот почему и остальная часть проблемы:

Содержимое ниже содержит 3 флажка и набор DIVS, которые должны появляться и исчезать, когда флажки установлены и не отмечены. На первый взгляд, они работают. Если поставить галочку слева направо, вы обнаружите содержание для каждого из них.

Однако иногда снятие отметки не скрывает содержимое. В случае второго и третьего флажка, есть тест. Один из найденных DIV содержит ОБА «Зеленозуб» и «Краснозуб», что означает, что при проверке второго флажка будут обнаружены все те, у кого есть «Зеленозуб», а при проверке третьего флажка БОЛЬШЕ не будет обнаружено, поскольку элементы «Краснозуб» также существуют с элементами «Зеленозуб». Это правильное поведение, но ОТКЛЮЧЕНИЕ флажка Greentooth (2nd) ДОЛЖНО скрывать DIVS только для Greentooth, но это не так. Снятие флажка Redtooth DIVS может или не может скрыть их, а снятие флажка с первого флажка может или не может работать.

Таким образом, похоже, что JS / JQuery обращает внимание на результат CHECKED флажка, но, похоже, не выполняет итерацию по оставшимся флажкам, чтобы проверить их состояние. Это правильно?

Я играл с JQuery Listen and Live, но никуда не попал. Нужна ли какая-то петля?

Если вы не понимаете, о чем я говорю, поместите код в браузер и попробуйте несколько раз проверить и снять флажок.

Спасибо за вашу помощь.

    <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>


</head>
<body>

<script type="text/javascript">

$(document).ready(function()
{

    $("form[name=form1] input:checkbox").click(function()
 {  
       $(".rightcolumn div:contains('"+this.value+"')").css("display", this.checked?"block":"none");
            });
            });      
</script>

<div name="leftcolumn">

<form action="" method="post" name="form1" >
  <label>
    <input type="checkbox" id="Yoko" value="Sabretooth">
    Sabretooth
  </label>
  <label>
    <input type="checkbox" id="Yoko-" value="Greentooth">
    Greentooth
  </label>
  <label>
    <input type="checkbox" id="Ringo" value="Redtooth">
    Redtooth
  </label>
</form>
  </div>

    <div class="rightcolumn">   
    <style type="text/css">
    label
{
    font-weight: bold;
}


.hide
{
    display: none;
}

.show
{
    display: block;
}
  </style>
        <div name="hider" class="hide">
        John Resig Sabretooth
        </div>
        <div name="hider" class="hide">
        George GreentoothMartin
        </div>
        <div name="hider" class="hide">
        Malcom John Greentooth GreentoothRedtoothSinclair
        </div>
        <div name="hider" class="hide">
        J. Ohn
        </div>
        <div name="hider" class="hide">
        George toothMartin
        </div>
        <div name="hider" class="hide">
        Malcom John Greentooth GreentoothRedtoothSinclair
        </div>
        <div name="hider" class="hide">
        J. Ohn
        </div>
    </div>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 11 августа 2011
$('input[type=checkbox]').click(function()
{   
 $("div").each(function()
    {
    //a regex to match the text got from $(this).innerText or this.InnerHTML to $(this).val()
    //if it returns true then
    $(this).show();
    })
});
0 голосов
/ 11 августа 2011

Я вижу, что у вас есть одинаковые идентификаторы для нескольких флажков, который не является допустимым HTML. Но вы можете попробовать это решение

<form name="form1" method="post" action="">
  <label>
    <input type="checkbox" name="checkboxx1" value="john">
    Sabretooth</label>
    <label>
    <input type="checkbox" name="checkboxx2" value="ohnn">
    Greentooth</label>
    <label>
    <input type="checkbox" name="checkboxx3" value="xyz">
    Redtooth</label>
</form>

//I am setting the keyword to look for in the value field of each checkbox.

    $(function(){

      $("form[name=form1] input:checkbox").click(function(){
        $("div:contains('"+this.value+"')").css("display", this.checked?"block":"none");
      });

    });
0 голосов
/ 11 августа 2011

Если вы добавите атрибут значения в свои флажки, вы можете использовать его для выбора div s, которые вы хотите показать:

$('input[type=checkbox]').click(function()
{
    $("div:contains('"+$(this).val()+"')").toggle();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...