如何通过勾选当前部分内的复选框来勾选其他部分的所有复选框? [英] How do I tick all checkboxes of the other sections by ticking a checkbox found inside the current section?

问题描述

胡闹的小提琴还可以，请在下面阅读我需要更改的内容.

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

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

您单击☑1.1小节，然后单击所有其他按钮:

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

• ☑2.1小节
• ☑2.2小节
• ☑第2.3小节
• ☑2.4小节
• ☑3.1小节
• ☑3.2​​小节
• ☑第3.3节
• ☑3.4小节

这是HTML树:

第1节

Subsection 1.1
Subsection 1.2
Subsection 1.3
Subsection 1.4

第2节

Subsection 2.1
Subsection 2.2
Subsection 2.3
Subsection 2.4

第3节

Subsection 3.1
Subsection 3.2
Subsection 3.3
Subsection 3.4

更多详细信息:

您可以看到当前的jsfiddle示例有效.它可以勾选当前部分的所有复选框，同时勾选当前部分内部的一个复选框.我希望它的工作原理相同，但不要在其自己部分的复选框中打勾，而不是在其他部分的所有其他复选框上打勾.

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.

示例:我用小节1.1"选择了不是小节1的所有其他小节. "1.1小节"应选择其他所有内容:2.1小节，2.2小节，2.3小节，2.4小节，3.1小节，3.2小节，3.3小节，3.4小节

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

推荐答案

您可以通过将处理程序附加到第一个公共祖先上，使用事件委托机制来处理所有复选框的单击:

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.

这篇关于如何通过勾选当前部分内的复选框来勾选其他部分的所有复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！