js 单选、全选、反全选

最新推荐文章于 2024-04-14 11:50:51 发布

转载最新推荐文章于 2024-04-14 11:50:51 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wsxiao/blog/3034260

本文介绍了一种实现全选与单选功能的方法，包括如何通过检查全选状态来更新待选列表的选中状态，以及如何在单选模式下处理选中项的变化，并同步更新全选状态。

/**
 * 全选
 * checkAll：是否全选 true：全选，false：非全选
 * toBeSelectedArr: 待选的列表
 * selectKey： 已勾选对象的某个属性值
 * newListArr: 被勾选的key列表
 * */
export const selectAll = (checkAll:boolean, toBeSelectedArr:Array<any>, selectKey:any) => {
    let newListArr = [];
    let resList = []
    if (checkAll == true) {
        for (let list of toBeSelectedArr) {
            list.checked = true;
            newListArr.push(list);
        }
    } else if (checkAll == false) {
        for (let list of toBeSelectedArr) {
            list.checked = false;
        }
        return [];
    }

    if(selectKey !== ''){
        for(let item of newListArr){
            resList.push(item[selectKey]);
          }
      return resList;

    } else {
        return newListArr;
    }


};

/**
 * 单选
 * checkOne: 是否被单选 true为已选 false为取消选择
 * checkedKey：选中的key值
 * checkAll：联动是否全选
 * checkedList：被勾选的key列表
 * toBeSelectedArr：待选的列表
 * */
// 单选code checkOne：单选、checkedKey：选中的key值、checkAll联动全选、checkedList已被选中的key列表、toBeSelectedArr当前被选择的列表
export const selectOne = (checkOne, checkedKey, checkAll, checkedList, toBeSelectedArr) => {
  let existStatus = checkedList.indexOf(checkedKey)
  if ((checkOne == true) && (existStatus == -1)) {
      checkedList.push(checkedKey)
  } else if ((checkOne == false) && (existStatus != -1)) {
      checkedList.splice(existStatus, 1)
  }

  if (checkedList.length == toBeSelectedArr.length) {
      checkAll = true

  } else {
      checkAll = false
  }

  let checkedRes = {
    'isCheckAll': checkAll,
    'newListArr': checkedList
  };
  return checkedRes;

}

转载于:https://my.oschina.net/wsxiao/blog/3034260