Вот код, который я придумал, благодаря предложениям ниже. Большинство из них почти работали так, как предлагалось, но никто не пережил контакта с реальным миром. Вот почему и остальная часть проблемы:
Содержимое ниже содержит 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>