JQuery - проверить все флажки на загрузке страницы

Question

Я знаю, это может показаться любительской проблемой, но у меня возникли проблемы с выбором всех флажков на загрузке страницы с помощью JQuery. Я понял это с чистого JS.

Кроме того, как только эта проблема решена, мне нужно выполнить итерацию всех флажков и посмотреть, все ли они проверены. Если они есть, предупредите пользователя, что все они выбраны, если не все из них выбраны, тогда предупредите пользователя о другом сообщении.

Я собрал простой Jsfiddle, чтобы начать работу. Любая помощь будет оценена по достоинству.

JSFIDDLE

<table> 
<tr> 
    <th>Days of Week</th> 
     <td> 
     <div class="checkbox-group" id="checkboxes"> 
      <ul> 
      <li> 
       <input type="checkbox" id="mon"/> 
       <label for="mon">MON</label> 
      </li> 
      <li> 
       <input type="checkbox" id="tue"/> 
       <label for="tue">TUE</label> 
      </li> 
      <li> 
       <input type="checkbox" id="wed"/> 
       <label for="wed">WED</label> 
      </li> 
      <li> 
       <input type="checkbox" id="thur"/> 
       <label for="thur">THUR</label> 
      </li> 
      <li> 
       <input type="checkbox" id="fri"/> 
       <label for="fri">FRI</label> 
      </li> 
      <li> 
       <input type="checkbox" id="sat"/> 
       <label for="sat">SAT</label> 
      </li> 
      <li> 
       <input type="checkbox" id="sun"/> 
       <label for="sun">SUN</label> 
      </li> 
      </ul>    
      </div> 
<span id="allChecked" style="display:block; width:425px; text-align:center; color:#999999;"> 
       (all days selected) 
      </span> 
     </td> 
    </tr> 

Answer 1

$(document).ready(function(){ 
    var checkboxes = $(':checkbox'); 

    // Check all checkboxes 
    checkboxes.prop('checked', true); 

    // Check if they are all checked and alert a message 
    // or, if not, alert something else. 
    if (checkboxes.filter(':checked').length == checkboxes.length) 
     alert('All Checked'); 
    else 
     alert('Not All Checked'); 
}); 

JSFIDDLE

или если вы хотите обновить span:

$(document).ready(function(){ 
    var checkboxes = $(':checkbox'), 
     span  = $('#allChecked'); 

    checkboxes.prop('checked', true); 

    checkboxes.on('change', function(){ 
     var checked = checkboxes.filter(':checked'); 
     if (checked.length == checkboxes.length) 
      span.text('(All Days Selected)'); 
     else 
     { 
      var days = jQuery.map(checked, function(n){return n.id;}); 
      span.text('(' + days.join(', ') + ' Selected)'); 
     } 
    }); 
}); 

JSFIDDLE

Answer 2

Чтобы проверить их все

$('[type="checkbox"]').attr('checked', true); 

, чтобы увидеть, если все они проверены (кажется, вы должны установить атрибут для пользовательского стиля)

$('[type="checkbox"]').length === $('[type="checkbox"]:checked').length 

FIDDLE

Answer 3

$(document).ready(function(){ 
    $(':checkbox').attr('checked',true); 
}); 

Я просто попытался его в ссылке JSFiddle и она работает.

Answer 4

Пожалуйста, перейдите по ссылке ниже, показывает различные способы для достижения того же:

Check all checkboxes on page load with jQuery

Надеется, что это помогает. Спасибо, Jatin

Answer 5

$(function(){ 
$('[type=checkbox]').attr({'checked':'checked'}); 

var checkedArray = [] ; 
$.each($('[type= checkbox]'),function(index,value){ 
    if($(this).attr('checked') == 'checked') 
    checkedArray.push($(this).attr('id')); 
}); 
    console.log(checkedArray.length); 
    //["mon", "tue", "wed", "thur", "fri", "sat", "sun"] 
}); 

DEMO

checkedArray массив будет иметь список id проверяемого флажок

И вы можете сделать checkedArray.length, чтобы получить длину массива