隐藏特定 div 并选中 div 内所有复选框的 Jquery 复选框答案

【问题标题】：Jquery checkbox that hide a specific div and checked all checkboxses inside the div隐藏特定 div 并选中 div 内所有复选框的 Jquery 复选框
【发布时间】：2013-06-30 07:18:18
【问题描述】：

如何防止在我运行代码时复选框不被选中？我有一些带有复选框的 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/

【问题讨论】：

在jsfiddle.net/oskar9/8k2HK查看所有html和jquery
首先要记住每个元素都有不同的 id。两个元素不能有相同的 id。在您的代码中，两个复选框具有相同的 id
@oskar - 这就是你要找的东西：jsfiddle.net/8k2HK/9
你为什么改变你的答案？

标签： jquery html checkbox toggle checked

【解决方案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/

【讨论】：

太好了，不客气。如果您觉得自己得到了答案，请将帖子标记为答案或为帖子点赞。

【解决方案2】：

由于“防止复选框被选中......”，第一次看到这个问题受到启发，建议 event.preventDefault()。 Bu 后来一次又一次地阅读它，我明白你想要不同的东西。 “检查和隐藏”领先一步。我为这个问题准备了demo at jsFiddle。 'upper checkboxes' 通过以下方式控制 'sub checkboxes'：

$("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()。

【讨论】：

谢谢大家，但@Fredrick 发布的答案是我想要的:)
@oskar，欢迎您。您可以通过注释掉补偿部分来了解它的帮助。对于那些看不到任何动作的人；请选择正确的 jQuery 库（在 1.9.1 和 onDomReady 选项上测试）

【解决方案3】：

Try thisjsfiddle.net/Subhash09/8k2HK/10/

【讨论】：