Jquery checkbox that hide a specific div and checked all checkboxses inside the div

Question

How to prevent the check boxes not to checked when I run the code? I have some divs with checkboxes inside them, and want to checked the checkbexes inside each and hide the specific div at the same time, but when I run it, all checkboxes are checked :

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

Here it is currently: http://jsfiddle.net/oskar9/8k2HK/

Answer 1

First view to the question inspired to suggest event.preventDefault() because of "preventing checkboxes from being checked ..". Bu later reading it again and again i understand that you want something different. "Checking and hiding" steps ahead. I prepared a demo at jsFiddle for this question. 'upper checkboxes' control the 'sub checkboxes' with:

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

One little note about checkboxes that jquery team suggests is that you should use prop() instead of attr() if you target ($ 1.6+).

Answer 2

 <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>

script

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

});

try this code in below link

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

Answer 3

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