全选反选判断列表内是否全选

最新推荐文章于 2020-09-27 13:25:20 发布

Ming-code

最新推荐文章于 2020-09-27 13:25:20 发布

阅读量270

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/xiaoming7776/article/details/107787618

版权

Jquery 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<table class="familyTable" border="0" cellspacing="0" cellpadding="0">
   <thead>
   <tr >
       <th width="30"><input type="checkbox" id="selectAll" onclick="onSelectAll(this)"></th>
       <th>保单号</th>
       <th>金额</th>
       <th>出单时间</th>
   </tr>
   </thead>
   <tbody id="invoiceCheckboxAll">
   <tr>
       <td><input type="checkbox" name="selectBox" onclick="onSelectIs()"></td>
       <td>12981927391723<input type="hidden" name="policy" value="12981927391723"></td>
       <td>1.00<input type="hidden" name="money" value="1.00"></td>
       <td>2020-02-02<input type="hidden" name="time" value="2020-02-02"></td>
   </tr>
   <tr>
       <td><input type="checkbox" name="selectBox" onclick="onSelectIs()"></td>
       <td>12981927391723<input type="hidden" name="policy" value="12981927391723"></td>
       <td>2.10<input type="hidden" name="money" value="2.10"></td>
       <td>2020-02-02<input type="hidden" name="time" value="2020-02-02"></td>
   </tr>
   <tr>
       <td><input type="checkbox" name="selectBox" onclick="onSelectIs()"></td>
       <td>12981927391723<input type="hidden" name="policy" value="12981927391723"></td>
       <td>3.00<input type="hidden" name="money" value="3.00"></td>
       <td>2020-02-02<input type="hidden" name="time" value="2020-02-02"></td>
   </tr>
   </tbody>
</table>

在这里插入图片描述

/**
* 全选和取消
*/
function onSelectAll(obj) {
   var isCheck = $(obj).prop("checked");
   $("input[name='selectBox']").prop("checked",isCheck);
}
/**
* 判断列表内是否全选
  */
 function onSelectIs() {
     var flag = true;
     $("#invoiceCheckboxAll > tr").each(function (i, item) {
         var isCheck = $(item).find("input[type='checkbox']").prop("checked");
         if(isCheck == false){
             flag = false;
         }
     })
     if(flag){
         $("#selectAll").prop("checked",true);
     }else {
         $("#selectAll").prop("checked",false);
     }
 }