Question

掌握小提琴是好的，请在下面阅读我需要改变的内容。

点击☑第1.1小节，然后点击所有其他内容：

☑第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示例有效。它可以勾选当前部分的所有复选框，同时勾选当前部分内的一个复选框。我希望它工作相同，但不要勾选其自己部分的复选框，而是勾选其他部分的所有其他复选框。

示例：我选择“第1.1节”所有其他不属于第1节的部分。 “第1.1款”应选择所有其他：第2.1款，2.2款，2.3款，2.4款，3.1款，3.2款，3.3款，3.4款

Answer 1

您可以通过在第一个共同祖先上附加处理程序来处理使用事件委派机制单击所有复选框：

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');

        }
    }
});

您可能需要根据尚未考虑的一些约束相应地修改此代码。

如何勾选当前部分中的复选框，勾选其他部分的所有复选框？

1 个答案: