Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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/

share|improve this question
   
Se all html and jquery at jsfiddle.net/oskar9/8k2HK – oskar Jun 29 at 11:03
1  
First thing you remember that every element have it different id. Two element cannot have same id. In your code both checkbox have same id – Subhash Jun 29 at 11:12
@oskar - is this what you're looking for: jsfiddle.net/8k2HK/9 – Joe Jun 29 at 11:18

3 Answers

up vote 0 down vote 
 <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/

share|improve this answer
thanks for help. I'v got my point:) – oskar Jun 30 at 19:49
Great, you are welcome. if you feel you got your answer, please mark the post as answer or upvote to the post. – Bhaarat Jul 1 at 1:09
up vote 0 down vote

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+).

share|improve this answer
How would this help? – Joe Jun 29 at 11:16
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – sashkello Jun 29 at 11:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.