Question

我有一个复选框列表，我有一个select_all复选框。请检查代码中的注释。

$('#select_all').change(function() {        
    var checkboxes = $("input[name^='select']");
    if($('#select_all').is(':checked')) {
           //here i want to check where this checkbox (checkbox from the list not select_all checkbox) is visible or not.
           // if visible then check the checkbox
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

是否有任何想法来检查可见性： -

  $("input[name^='select'][checked]").each(   
         function() {   
                // Insert code here   
             }   
  );

Answer 1

使用:visible selector。

$('#select_all').change(function() {        
    var checkboxes = $("input[name^='select']");

    if (this.checked) {
        checkboxes.filter(':visible').attr('checked', true);
    } else {
        checkboxes.attr('checked', false);
    }
});

请注意我是如何使用正确设置checked属性的方法的;值应该是布尔值，而不是字符串。

Answer 2

如果我理解你的问题：

$('#select_all').change(function() {
    // Is "select all" checked?
    if(this.checked) {
        // Yes, check all *visible* checkboxes
        $("input[name^='select']:visible").attr('checked', 'checked');
    } else {
        // No, uncheck all checkboxes (visible or not)
        $("input[name^='select']").removeAttr('checked');
    }
});

...但我也会更加谨慎，并在选择器中加上[type=checkbox]：

$('#select_all').change(function() {
    // Is "select all" checked?
    if(this.checked) {
        // Yes, check all *visible* checkboxes
        $("input[name^='select'][type=checkbox]:visible").attr('checked', 'checked');
    } else {
        // No, uncheck all checkboxes (visible or not)
        $("input[name^='select'][type=checkbox]").removeAttr('checked');
    }
});

另外，对我来说，如果某事的动作不平衡，它总是一个红旗 - 在这种情况下，选中“全选”将检查所有可见的，但取消选中它将取消选中 all 他们我可能会这样做：

$('#select_all').change(function() {
    var checkboxes = $("input[name^='select'][type=checkbox]:visible");
    // Is "select all" checked?
    if(this.checked) {
        // Yes, check all *visible* checkboxes
        checkboxes.attr('checked', 'checked');
    } else {
        // No, uncheck all *visible* checkboxes
        checkboxes.removeAttr('checked');
    }
});

......或者这个：

$('#select_all').change(function() {
    // Is "select all" checked?
    if(this.checked) {
        // Yes, check all *visible* checkboxes...
        $("input[name^='select']:visible").attr('checked', 'checked');

        // ...and make sure all the invisible ones are unchecked
        $("input[name^='select'][type=checkbox]:not(:visible)").removeAttr('checked');
    } else {
        // No, uncheck all checkboxes (visible or not)
        $("input[name^='select'][type=checkbox]").removeAttr('checked');
    }
});

...但你比我更了解你的要求。

如果可见，请选中复选框

2 个答案: