jq借用插件实现全选、反选、单选和shift多选

jq借用插件实现全选、反选、单选和shift多选

插件链接地址：http://www.lynnk.cn/post/111.html

点击下载后进入文件目录：/dist/jquery-multiselect-checkbox.js把jquery-multiselect-checkbox.js这一个文件放到本地并引入即可。

插件使用方法链接里也有叙述

针对我自己的项目做了些改动，由于我没用原生的checkbox而是自己另写的样式，使用label包裹checkbox实现了点击效果，所以会导致插件的shift选中时同时触发了input的点击和label的点击，事件冒泡触发了两次，结果就是shift选中时最后一个点击的checkbox未被选中

解决办法：在jquery-multiselect-checkbox.js里加入阻止事件冒泡的代码

下面是HTML和js代码

html:

<table id="userTable" class="comTable comTablePopLeft">
      <thead>
        <tr>
          <th style="width: 3%;text-align: center;">
            <label for="checkAll" class="kt-checkbox checkbox-pos">
              <input type="checkbox" id="checkAll" class="checkAll " autocomplete="off">
              <span class="changeCheck"></span>
            </label>
          </th>
          <th style="width: 6%;text-align: center;">序号
          </th>
          <th style="text-align: left;width: 20%">业务类型
          </th>
          <th style="text-align: left;width: 11%">学习状态
          </th>
          <th style="text-align: left;width: 46%">学习内容
          </th>
          <th style="width: 14%">操作</th>
        </tr>
      </thead>
      <tbody>
        <#if list?? && (list?size> 0) >
          <#list list as item>
            <tr>
              <td>
                <label for="dev_${item.rowNum}" class="kt-checkbox checkbox-pos">
                  <input type='checkbox' id='dev_${item.rowNum}' class='sele-dev' value='${item.aiKfLearningLibraryId}'
                    autocomplete="off">
                  <span class="changeCheck"></span>
                </label>
                <!-- <input type='checkbox' id='dev_${item.rowNum}' class='sele-dev kt-checkbox1'
                  value='${item.aiKfLearningLibraryId}' autocomplete="off"> -->
              </td>
              <td style="text-align: center;">
                ${item.rowNum}</td>
              <td style="text-align: left;">
                ${item.businessTypeName}
              </td>
              <td style="text-align: left;">
                ${item.learningStatusBuf}</td>
              <td class="bmContent" style="text-align: left;">
                ${item.learningContent}</td>
              <td>
                <a data-id="${item.aiKfLearningLibraryId}" class="edit" href="javascript:void(0);">修改
                  |</a>
                <a href="javascript:void(0);" class="delete" data-id="${item.aiKfLearningLibraryId}">
                  删除</a>
              </td>
            </tr>
          </#list>
          <#else>
            <tr>
              <td colspan="7">
                暂无数据
              </td>
            </tr>
        </#if>
        <tr>
          <td colspan="7">
            <div id="table-bottom">
              ${pageStrChannelPriority}</div>
          </td>
        </tr>
      </tbody>
    </table>

js:

$(".checkAll").multiselectCheckbox({
          checkboxes: ".comTable tbody .sele-dev",
          sync: ".comTable tbody tr",
          onNotAllChecked: function (selectedMap) {
            let shiftIds = selectedMap.orderedByI();
            //拿取shiftIds数组对象里的value
            let shiftIdsArr = shiftIds.map(function (item) {
              return item.value;
            });
            console.log("Not all checked", shiftIdsArr)
            $('#commonListIds').val(shiftIdsArr.join(','));
          },
          onAllChecked: function (selectedMap) {
            let shiftIds = selectedMap.orderedByI();
            let shiftIdsArr = shiftIds.map(function (item) {
              return item.value;
            });
            console.log("All checked", shiftIdsArr);
            $('#commonListIds').val(shiftIdsArr.join(','));
            if ($('#commonListIds').val() == '') {
              $('.checkAll').prop('checked', false);
            }
          },
          onAllUnchecked: function (selectedMap) {
            console.log("All unchecked", selectedMap.orderedByI());
            $('#commonListIds').val('');
          }
        });