优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo

提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子:

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

 

 

 

 

// 单选 判断多选