check the checkbox if visible

问题

I have a list of checkboxes and i have a select_all checkbox. Please check the comment in the code.

$('#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');
    }
});

Is there any think like this to check the visibility:--

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

回答1:

Use the :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);
    }
});

Note how I've used the correct method of setting the checked attribute; the value should be a boolean, not a string.

回答2:

If I understand your question correctly:

$('#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');
    }
});

...but I'd also be a bit more cautious and put a [type=checkbox] in the selector:

$('#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');
    }
});

Separately, for me it's always a red flag if the action of something is unbalanced — in this case, checking the "select all" will check all the visible ones, but unchecking it will uncheck all of them. I'd probably either do this:

$('#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');
    }
});

...or this:

$('#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');
    }
});

...but you know your requirements better than I do.

来源：https://stackoverflow.com/questions/4067415/check-the-checkbox-if-visible

标签

jquery

checkbox