单击 CheckBox 时 JQuery 显示 div答案

【问题标题】：JQuery Display divs on click of CheckBox单击 CheckBox 时 JQuery 显示 div
【发布时间】：2011-10-25 00:55:33
【问题描述】：

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

下面的内容展示了 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>

【问题讨论】：

标签： java jquery checkbox multipleselection

【解决方案1】：

如果您在复选框中添加值属性，则可以使用它来选择要显示的divs：

$('input[type=checkbox]').click(function()
{
    $("div:contains('"+$(this).val()+"')").toggle();
});

【讨论】：

【解决方案2】：

$('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();
    })
});

【讨论】：

【解决方案3】：

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

    });

【讨论】：