Question

以下是我提出的代码，感谢下面的建议。他们中的大多数人几乎都按照提供的方式工作，但没有人幸存下来与现实世界接触。这就是原因，以及问题的其余部分：

下面的内容显示了3个复选框和一组DIVS，它们应该在选中和取消选中复选框时显示和消失。一开始尝试，它们似乎有效。从左到右选中每个复选框会显示每个复选框的内容。

但是，有时取消选中不会隐藏内容。在第二个和第三个复选框的情况下，有一个测试。其中一个搜索到的DIV包含两个“Greentooth”和“Redtooth”，这意味着检查第二个复选框将显示所有使用Greentooth的人，并且第三个框的检查将不会显示更多因为Redtooth项目也存在Greentooth项目。这是正确的行为，但UNchecking 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>

Answer 1

如果您为复选框添加了一个值属性，则可以使用它来选择要显示的div：

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

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

Answer 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");
      });

    });

单击CheckBox时，JQuery Display div

3 个答案: