0

这是我想出的代码，感谢以下建议。他们中的大多数人几乎都按规定工作，但没有人在与现实世界的接触中幸存下来。这就是为什么，以及剩下的问题：

下面的内容展示了 3 个复选框和一组 DIVS，它们应该随着复选框被选中和取消选中而出现和消失。第一次尝试，他们似乎工作。从左到右选中每个复选框会显示每个复选框的相关内容。

但是，有时取消选中并不会隐藏内容。在第二个和第三个复选框的情况下，有一个测试。其中一个搜索到的 DIV 包含“Greentooth”和“Redtooth”，这意味着选中第二个复选框将显示所有具有 Greentooth 的框，而选中第三个框将显示任何内容，因为 Redtooth 项目也存在于 Greentooth 项目中。这是正确的行为，但取消选中 Greentooth (2nd) 复选框应该隐藏 Greentooth-only DIVS，但事实并非如此。取消选中 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>
4

3 回答 3

0

我看到您的多个复选框具有相同的 id，这不是有效的 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");
      });

    });
于 2011-08-11T14:21:56.167 回答
0

如果您向复选框添加 value 属性，则可以使用它来选择div要显示的 s：

$('input[type=checkbox]').click(function()
{
    $("div:contains('"+$(this).val()+"')").toggle();
});
于 2011-08-11T14:17:59.140 回答
0 
$('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();
    })
});
于 2011-08-11T14:18:16.930 回答