0

如何防止在我运行代码时不选中复选框？我有一些带有复选框的 div，并且想要检查每个内部的复选框并同时隐藏特定的 div，但是当我运行它时，所有复选框都被选中：

HTML：

<input type="checkbox" id="hide-and-checked">group 1
<div id="one" class="hide-and-checked">
    <input type="checkbox" class="list_check" value="1">1
    <input type="checkbox" class="list_check" value="2">2
    <input type="checkbox" class="list_check" value="3">3</div>
<br>
<input type="checkbox" id="hide-and-checked">grup 2
<div id="two" class="hide-and-checked">
    <input type="checkbox" class="list2" value="1">1
    <input type="checkbox" class="list2" value="2">2</div>

JS：

$(document).ready(function () {
    function toggleDiv() {
        var $this = $(this);

        $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show']();

        $(":checkbox").each(

        function () {
            $(this).attr('checked', true);
        });

    }
    $('input:checkbox').each(toggleDiv).click(toggleDiv);
});

目前在这里：http: //jsfiddle.net/oskar9/8k2HK/

4

3 回答 3

1 
 <input type="checkbox" id="hide-and-checked" checked="true" /> group 1

 <div  id="one" class="hide-and-checked" >  
     <input type="checkbox" class="list_check" value="1"/>1
     <input type="checkbox" class="list_check" value="2"/>2
     <input type="checkbox" class="list_check" value="3"/>3
 </div>

<br />        
    <input type="checkbox" id="hide-and-checked"/> grup 2
 <div  id="two" class="hide-and-checked">

     <input type="checkbox" class="list2" value="1"/>1
     <input type="checkbox" class="list2" value="2"/>2

  </div>

脚本

$(document).ready(function() {

    $('input[id="hide-and-checked"]').each(function(){

    $(this).change(function(){toggleOperation(this)});      
    toggleOperation(this);
});
function toggleOperation(ctrl)    
    {
        var $this = $(ctrl);        
        if($this.is(':checked'))
        {
           $this.next().find(":checkbox").attr("checked",true);
            $this.next().show();


        }
        else 
        {

            $this.next().hide();                     $this.next().find(":checkbox").attr("checked",false);
        }
    }

});

在下面的链接中尝试此代码

http://jsfiddle.net/Bhaarat/8k2HK/13/

于 2013-06-29T12:42:01.227 回答
0

Try this jsfiddle.net/Subhash09/8k2HK/10/

于 2013-06-29T11:22:27.407 回答
0

event.preventDefault()由于“防止复选框被选中……”而受到启发的问题的第一个视图。Bu 后来一次又一次地阅读它，我明白你想要一些不同的东西。“检查和隐藏”领先一步。我在 jsFiddle为这个问题准备了一个演示。“上复选框”通过以下方式控制“子复选框”：

$("input.upper-box").on("change", function() {
var $this = $(this); 
 $this.next("div.sub-group")
     .find(":checkbox")
     .prop("checked", $this.prop("checked"))
 .end()
 .toggle("slow"); 
});

关于 jquery 团队建议的复选框的一点说明是，如果您的目标是（$ 1.6+） ，您应该使用prop()而不是使用。attr()

于 2013-06-29T11:16:19.270 回答