How do I tick all checkboxes of the other sections

问题:

The folliwing fiddle is ok, read below what I need to change at it.

http://jsfiddle.net/V5SSM/14/

You click on ☑ Subsection 1.1 and then all other get clicked:

• ☑ Subsection 2.1
• ☑ Subsection 2.2
• ☑ Subsection 2.3
• ☑ Subsection 2.4
• ☑ Subsection 3.1
• ☑ Subsection 3.2
• ☑ Subsection 3.3
• ☑ Subsection 3.4

Here is the HTML tree:

Section 1

Subsection 1.1
Subsection 1.2
Subsection 1.3
Subsection 1.4

Section 2

Subsection 2.1
Subsection 2.2
Subsection 2.3
Subsection 2.4

Section 3

Subsection 3.1
Subsection 3.2
Subsection 3.3
Subsection 3.4

More Details:

You can see that the current jsfiddle example works. It works to tick all checkboxes of the current section while ticking one checkbox from inside the current section. I want it to work the same, but not to tick checkboxes of its own section, rather to tick all other checkboxes of the other sections.

Example: I select with "Subsection 1.1" all other sections that are not Section 1. "Subsection 1.1" should select all other: Subsection 2.1, Subsection 2.2, Subsection 2.3, Subsection 2.4, Subsection 3.1, Subsection 3.2, Subsection 3.3, Subsection 3.4

回答1:

You can handle click on all checkboxes using event delegation mechanism by attaching the handler on the first common ancestor :

var type = 'input[type="checkbox"]';
$('#selectAllButton').on('click', function () {
    $(type).prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
    $(type).prop('checked', false).closest('label').removeClass('c_on');
});

// event Delegation
$('#docbuilder').click(function(e){
    var $t = $(this),
        $tar = $(e.target); // The node that has been clicked    
    // If checkbox
    if($tar.is(type)){
        var cbRemaining = $tar.closest('blockquote').find(type+':checked').length, /* counting how many checked checkboxes remain inside the current section */
            $otherCb = $t.children(':nth-child(n+3)').not($tar.closest('.document')[0]).find(type), /* Retrieve all checkboxes except the ones that belong to the current section */
            state = $tar.prop('checked'); // get the checked property of the checkbox beiing clicked
        // If subsection checkbox
        if($tar.closest('.subsection').length){
            if( !cbRemaining ){
                $tar.closest('blockquote').prev().find(type).prop('checked', false);
            }
            if( !cbRemaining || cbRemaining==1 && state){
                $otherCb.prop('checked', state);
            }
            $tar.parent()[(state ? 'addClass':'removeClass')]('c_on'); // should we add or remove the color class on the checkbox label
        // If section checkbox
        } else if($tar.closest('.section').length){
            if(state)  $otherCb.prop('checked', false);
            $tar.parent().siblings().find(type).prop('checked', state)
            .parent()[(state ? 'addClass':'removeClass')]('c_on');

        }
    }
});

You may need to modify this code a bit accordingly to some constraints not yet taken into account.