Question

I have a HTML table (generated with ASP:Repeater control). I have 2 check box columns in the table. Both the columns have a Select All check box in the header. So when we check the Select All, all the check boxes in the respective columns should be checked(pretty usual stuff. So I have handled that). Now the issue is that, when I check/unchecked a check box in column_1XRow_1, then the check box in the column_2XRow_1 should get enabled & checked/disabled & unchecked.

`

$(document).ready(function() {
    var $ResubAllChkBx = $('.ResubAll :checkbox');
    var $ResubItmChkBx = $('.ResubItm :checkbox');
    var $LLLCAllChkBx = $('.LLLCAll :checkbox');
    var $LLLCItmChkBx = $('.LLLCItm :checkbox');

    $ResubAllChkBx.change(function() {
        Chk_UnChkResubAll();
    });

    function Chk_UnChkResubAll() {
        if ($ResubAllChkBx.is(':checked')) {
            $ResubItmChkBx.filter(function() { return !this.disabled; }).attr('checked', 'checked');//check only when enabled
        }
        else {
            $ResubItmChkBx.filter(function() { return !this.disabled; }).removeAttr('checked');//check only when enabled
        }
    }
});`

So essentially Re sub is Col1 & LLLC is Col2.

I did all this stuff in plain JS code, but due to the load on the page, I start seeing the JS error “A script on this page ……”

How do I play around the check/unchecked check boxes in col1 & col2? Please help. I need the code in jQuery.

Thanks
Bobbie

Answer 1

Add the following script to your jquery code…

$('.ResubItm :checkbox').on('change', function(){    
    if($(this).is(':checked'))
        $(this).siblings('[type=checkbox]').each(function(){
            $(this).attr('checked','checked');
        })
    else
        $(this).siblings('[type=checkbox]').each(function(){
            $(this).attr('checked','');
        })
});


$('.LLLCItm :checkbox').on('change', function(){
    if($(this).is(':checked'))
        $(this).siblings('[type=checkbox]').each(function(){
            $(this).attr('checked','checked');
        })
    else
        $(this).siblings('[type=checkbox]').each(function(){
            $(this).attr('checked','');
        })
});