Jquery - 檢查頁面加載的所有複選框

我知道這可能看起來像一個業餘問題，但我在使用Jquery選擇頁面加載時的所有複選框時遇到問題。我用純JS解決了這個問題。Jquery - 檢查頁面加載的所有複選框

另外，一旦這個問題解決了，我需要遍歷所有複選框，看看它們是否全部檢查。如果他們是，提醒用戶他們都被選中，如果不是全部被選中，則提醒用戶另一條消息。

我已經把一個簡單的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>

來源

2014-01-22 ryan

呃，你就不能添加一個'checked'屬性的輸入元素？你不需要JS的那部分，這是正確的方法。 – rvighne

如果您在頁面加載時選擇所有這些內容，那麼爲什麼您需要檢查它們是否被選中？我認爲根本不需要任何JS。 – rvighne

$(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

來源

2014-01-22 00:25:33 MT0

MTO，非常感謝！這工作完美。我喜歡你如何創建一個數組，並回覆被檢查的日子。非常聰明！你回答了我的問題。道具給你！ – ryan

要檢查他們都

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

，看看它們都是被選中（好像你必須設置自定義樣式屬性）

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

FIDDLE

來源

2014-01-22 00:15:57 adeneo

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

我只是想在你的jsfiddle鏈接和它的作品。

來源

2014-01-22 00:16:43 user2930100

請通過下面的鏈接，顯示不同的方式來達到同樣的：

Check all checkboxes on page load with jQuery

希望這有助於。謝謝， Jatin

來源

2014-01-22 00:19:04 Jatin

$(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得到數組長度

來源

2014-01-22 00:21:38

Jquery - 檢查頁面加載的所有複選框

回答

相關問題