提要: 前端開發的時候, 經常會遇到表格勾選, 單個勾選判斷是否全選的事情.趁著有時間, 總結一下以備不時之需! 就像下面這個栗子:

1 源代碼: h5

// 全選框
<input type="checkbox" class="cb_All">
//單選框
<input type="checkbox" class="cb_One">

2 js代碼: 邏輯還是很簡單的 : 巧妙利用了"prop" 屬性達到了判斷的效果

//全選框勾選, 單選框全選
$(‘.cb_All‘).click(function () {
      $(‘.cb_One‘).prop(‘checked‘, $(‘.cb_All‘).prop(‘checked‘));
      
 
var che_nums = $(‘.cb_One:checked‘).length;
      $(‘.cb_check‘).text(che_nums);
    })

 // 單選框勾選,  判斷是否全選
    $(‘.cb_One‘).click(function () {
      $(‘.cb_All‘).prop(‘checked‘, $(‘.cb_One‘).length == $(‘.cb_One:checked‘).length);

      var che_nums = $(‘.cb_One:checked‘).length;
      $(‘.cb_check‘).text(che_nums);
    })
 

// 單選 判斷多選

優秀前端工程師必備: 非常常用的checkbox的騷操作---全選和單選demo