Question

用户可以通过单击各种复选框来选择和取消选择单个细化。
当面板选择了任意数量的面时，“清除”按钮需要显示。
当任何面板选择了任何面时，需要在细化控件的顶部显示“全部清除”按钮。

所以根据我的getElementById，我应该能够做到这一点，但我自己也不能。

// 'Getting' data-attributes using getAttribute
var size = document.getElementById('size');
var base = document.getElementById('base_colour');
var brand = document.getElementById('brand');

//When a panel has any number of facets selected, a “clear” button needs to be shown
$('input').on('click', function(){
    if ($('.option input:checkbox:checked').length > 0)    {
        // any one is checked        
    }
    else    {
       // none is checked
    }

});

http://jsfiddle.net/fsrdd5yz/

Answer 1

您可以执行类似

的操作

var $clearAll = $('.refinements > .clear-filter'),
    $checks = $('.options input[type="checkbox"]'),
    $clear = $('.refinements .panel .clear-filter');
$checks.change(function () {
    var $options = $(this).closest('.options'),
        $clear = $options.prev();
    //if the current checkbox is checked we can show the all and clear buttons
    if (this.checked) {
        $clear.show();
        $clearAll.show();
    } else {
        //if it is an uncheck operation then set the visibility based on overall state of respective checkboxes
        $clear.toggle($options.find('input[type="checkbox"]').is(':checked'))
        $clearAll.toggle($checks.is(':checked'))
    }
})

$clearAll.click(function (e) {
    e.preventDefault();
    $checks.prop('checked', false);
    $(this).hide();
    $clear.hide();
})
$clear.click(function (e) {
    e.preventDefault();
    $(this).next().find('input[type="checkbox"]').prop('checked', false);
    $clearAll.toggle($checks.is(':checked'));
    $(this).hide();
})

演示：Fiddle

如果选中/取消选中，则为jquery复选框

1 个答案: