FCAT

Appearance

Vue集成复选框逻辑 ​

类似于element中复选框的操作，但全选框没有 - 中间值表示不确定的中间量。改操作可能需要配合vue2的生命周期、监听器完成。

提示

可以使用该功能进行对element的table的列显示控制功能。

html
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox v-model="checkList.key1">Key1</el-checkbox>
<el-checkbox v-model="checkList.key2">Key2</el-checkbox>
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox v-model="checkList.key1">Key1</el-checkbox>
<el-checkbox v-model="checkList.key2">Key2</el-checkbox>
js
export default {
		name: 'checkAll',
		data() {
			return {
				checkAll: false, // 全选复选框，用来控制el-checkbox的开关
				checkList: {}, //复选框绑定的值，小checkbox的开关集合，暂时放到mounted里赋值
			}
		},
		mounted() {
             //checkList当然也可以直接放到data里声明，
			 //checkList代表着小复选框集合
			this.checkList = {
				key1: true,
				key2: true,
			};
		},
		watch: {
             // 监听复选框配置列所有的变化，让复选框控制全选
			checkList: {
				handler(newValue, oldValue) {
                     //遍历一遍this.checkList，如果它里面的属性的值都是true，输出true
					for (var i in newValue) {
						if (newValue[i] == true) {
							this.checkAll = true
						}
					}
					for (var i in newValue) {
						if (newValue[i] == false) {
							this.checkAll = false
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			// 全选控制复选框方法，使用changed触发
			handleCheckAllChange() {
				if (this.checkAll) {
					for (var i in this.checkList) {
						this.checkList[i] = true
					}
				} else if (!this.checkAll) {
					for (var i in this.checkList) {
						this.checkList[i] = false
					}
				}
			},
		},
	}
export default {
		name: 'checkAll',
		data() {
			return {
				checkAll: false, // 全选复选框，用来控制el-checkbox的开关
				checkList: {}, //复选框绑定的值，小checkbox的开关集合，暂时放到mounted里赋值
			}
		},
		mounted() {
             //checkList当然也可以直接放到data里声明，
			 //checkList代表着小复选框集合
			this.checkList = {
				key1: true,
				key2: true,
			};
		},
		watch: {
             // 监听复选框配置列所有的变化，让复选框控制全选
			checkList: {
				handler(newValue, oldValue) {
                     //遍历一遍this.checkList，如果它里面的属性的值都是true，输出true
					for (var i in newValue) {
						if (newValue[i] == true) {
							this.checkAll = true
						}
					}
					for (var i in newValue) {
						if (newValue[i] == false) {
							this.checkAll = false
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			// 全选控制复选框方法，使用changed触发
			handleCheckAllChange() {
				if (this.checkAll) {
					for (var i in this.checkList) {
						this.checkList[i] = true
					}
				} else if (!this.checkAll) {
					for (var i in this.checkList) {
						this.checkList[i] = false
					}
				}
			},
		},
	}

原生JavaScript实现不一样的 复选框-反选-全选 操作 ​

html
看书：<input type="checkbox" name="checkbox" value=1><br>
写字：<input type="checkbox" name="checkbox"value=2><br>
打飞机：<input type="checkbox" name="checkbox"value=3><br>
玩游戏：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="opcheckboxed('checkbox', 'checkall')">全选</button>
<button onclick="opcheckboxed('checkbox', 'uncheckall')">取消全选</button>
<button onclick="opcheckboxed('checkbox', 'reversecheck')">反选</button>
看书：<input type="checkbox" name="checkbox" value=1><br>
写字：<input type="checkbox" name="checkbox"value=2><br>
打飞机：<input type="checkbox" name="checkbox"value=3><br>
玩游戏：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="opcheckboxed('checkbox', 'checkall')">全选</button>
<button onclick="opcheckboxed('checkbox', 'uncheckall')">取消全选</button>
<button onclick="opcheckboxed('checkbox', 'reversecheck')">反选</button>
js
function opcheckboxed(objName, type){
  var objNameList=document.getElementsByName(objName);
  if(null!=objNameList){
    for(var i=0;i<objNameList.length;i++){  
      if(objNameList[i].checked==true)
      {
        if(type != 'checkall') {  // 非全选
          objNameList[i].checked=false;
        }
        
      } else {
        if(type != 'uncheckall') {  // 非取消全选
          objNameList[i].checked=true;
        }
      }
    }  
  }
}
function opcheckboxed(objName, type){
  var objNameList=document.getElementsByName(objName);
  if(null!=objNameList){
    for(var i=0;i<objNameList.length;i++){  
      if(objNameList[i].checked==true)
      {
        if(type != 'checkall') {  // 非全选
          objNameList[i].checked=false;
        }
        
      } else {
        if(type != 'uncheckall') {  // 非取消全选
          objNameList[i].checked=true;
        }
      }
    }  
  }
}