Установите флажок, если он отображается

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

Отдельно для меня это всегда красный флаг, если действие чего-то неуравновешенного   — в этом случае, при проверке «выберите все» проверит все видимые, но при снятии отметки снимите отметку все из них. Я бы, наверное, либо сделать это:

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

... но вы знаете ваши требования лучше, чем я.