CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Sanjay Rathod
Sanjay Rathod

Reputation: 1143

How to check checkbox on change of another checkbox?

i want to check a checkbox when user check checkbox in parent li.

so here is my html code.

<ul>
    <li class="parent3 child2" id="3">
        <span style="padding-left:60px;">
            <i aria-hidden="true" class="icon-minus"></i>
            Civil
        </span>
        <div>
            <label class="viewList">
                <input type="checkbox" value="49" name="view[]">
                View
            </label>
            <label class="downList">
                <input type="checkbox" value="49" name="down[]">
                Download
            </label>
            <label class="upList">
                <input type="checkbox" value="49" name="update[]">
                Update
            </label>
        </div>
        <ul class="submenu" style="display: block;">
            <li class=" child3" id="4">
                <span style="padding-left:80px;">test1</span>
                <div>
                    <label class="viewList">
                        <input type="checkbox" value="60" name="view[]">
                        View
                    </label>
                    <label class="downList">
                        <input type="checkbox" value="60" name="down[]">
                        Download
                    </label>
                    <label class="upList">
                        <input type="checkbox" value="60" name="update[]">
                        Update
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

now i want to check the checkbox of child checkbox.

so i have tried following code.

$(document).ready(function(){
    $('.viewList input').change(function () {
        alert('hello')
        if ($(this).attr("checked")) {
            $(this).closest('li').children('.submenu .viewList input').prop( "checked", true );
            alert('hello')
        }
        // not checked
    }); 
});

also here is the jsfiddle where also i had tried.

Any help will appreciated. Thanks

Upvotes: 1

Views: 645

Answers (5)

Kamil Borecki
Kamil Borecki

Reputation: 23

this work fine:

$(document).ready(function() {
  $('[type="checkbox"]').change(function() {
    var checked = $(this).attr('checked');
    var name = $(this).attr('name');
   $("[name= '"+ name + "']").attr('checked', checked);

  });
});

JSFIDDLE

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

Try this..

$(document).ready(function(){
    $('[type="checkbox"]').change(function () {
        var checked = $(this).prop('checked');
        var cls = $(this).parent().attr('class'); //or 'viewList'      
        $('.'+cls).find('[type="checkbox"]').prop('checked', checked);
    }); 
});

Upvotes: 1

Ygalbel
Ygalbel

Reputation: 5519

You can use the fact that elements have same name.

That's the code:

$(document).ready(function(){
    $('input').change(function () {
               $("input[name='"+ $(this).attr('name')+"']").prop( "checked", $(this).prop('checked') );
            });

        });

Here you have a working fiddle.

Upvotes: 1

Oshadha
Oshadha

Reputation: 548

Replace the $(document).ready with following:

$(document).ready(function(){
    $('.viewList input').change(function () {
            //alert('hello')
            if ($(this).prop('checked')) {
                $('.submenu .viewList input').prop( 'checked', true );
                //alert('hello')
            }
            // not checked
        }); 
});

Please note that I have commented alert calls.

Hope this will help you.

Upvotes: 1

Alok Patel
Alok Patel

Reputation: 8012

You need to use sevral jQuery functions to achieve the same. E.g parents(), find, etc...

Your updated code should look like this.

$(document).ready(function(){
    $('.viewList input').change(function () {
        if($(this).parents('li').size()>0) {
                var parentLi=$(this).parents('li');
            if(parentLi.find('ul').size()>0) {
                    var childInput=parentLi.find('ul').find('.viewList input');
                if($(this).is(":checked")){
                    childInput.prop('checked','checked');
                } else {
                    childInput.removeAttr('checked');
                }
            }
        }
        }); 
});

Updated jsFiddle link: https://jsfiddle.net/xf6Lfu0v/12/

What we need to do here is, when we click on check-box first we will check if there is a LI parent or not, if yes then we will find if there is child UL in it or not. If yes then check/uncheck the corresponding input.

Upvotes: 2

Related Questions