CODEWITHSUNDEEP
jquerycheckbox
Gowthamr.cs
Gowthamr.cs

Reputation: 141

CheckAll CheckBox Jquery div

<div id="tree">
        <ul>
            <li>
                <input type="checkbox"/> Root
                <ul>
                    <li>
                        <input type="checkbox"/> Child 1
                        <ul>
                            <li><input type="checkbox"/> Subchild 1</li>
                            <li><input type="checkbox"/> Subchild 2</li>
                            <li><input type="checkbox"/> Subchild 3</li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox"/> Child 2
                        <ul>
                            <li><input type="checkbox"/> Subchild 1</li>
                            <li><input type="checkbox"/> Subchild 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>​

Above is html code where there is a tree with parent and child nodes.

This works well. But if all the sub node are checked then root/parent has to be automatically checked.

And also if all the sub node are unchecked then root/parent has to be automatically unchecked. How do I achieve this?

Jquery

   $(document).ready(function() {    
       $("#tree input:checkbox").change(function() {
       var val = $(this).attr("checked");
       $(this).parent().find("input:checkbox").each(function() {
          if (val) {
             $(this).attr("checked", "checked");
          } 
         else {
            $(this).removeAttr("checked");
         }
     });    
  });

});​

Upvotes: 0

Views: 265

Answers (4)

Zudwa
Zudwa

Reputation: 1400

This seems to work correctly (For both checked/unchecked status):

$(function(){
    $("#tree input:checkbox").change(function () {
        var $this = $(this), val = this.checked, $parent = $(this.parentNode.parentNode.parentNode);

        $this.parent().find("input:checkbox").each(function () {
            this.checked = val;
        });

        checkChildren($parent);
    });

    function checkChildren($node) {
        var allChecked = null;

        $node.find("ul input:checkbox").each(function(){
            if (null === allChecked) allChecked = this.checked;

            if (allChecked !== this.checked) {
                allChecked = null;
                return false;
            }
        });

        if (allChecked !== null) {
            $node.find(">input:checkbox").prop("checked", allChecked);

            var $parent = $node.parent().parent();

            if ($parent.length) checkChildren($parent);
        }
    }
});

Upvotes: 1

Praveen
Praveen

Reputation: 56501

When all sub-child Nodes are checked, then its parent will be also checked. Here is the code: 

 var io = $(this).parent().parent();
    var lidtOfIO = io.find('input[type="checkbox"]');
         var listOfCheckedCBox = $(this).parent().parent().find('input[type="checkbox"]:checked').length;
         if (listOfCheckedCBox == lidtOfIO.length)
            $(io).parent().find('input[type="checkbox"]').prop('checked', true);

JSFiddle

Upvotes: 1

Chirag Vidani
Chirag Vidani

Reputation: 2577

Please below jquery code

$(document).ready(function () {
    $("input[type='checkbox']").change(function () {                
        var val = $(this).is(":checked");
        $(this).parent().find("input[type='checkbox']").each(function () {            
                $(this).prop("checked", val);            
        });
    });
});

Also jsfiddle url

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use like this:

$('#tree input:checkbox').each(function(){
 if($(this).is(':checked')){
  $('#tree input.first').prop('checked',true);
}
});

I've added input.first in the code as if you should add a class for that input to which you want to check if all checked.

Upvotes: 0

Related Questions