全选，反选小demo

记录一下全选反选的小知识点，非常简单
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的全选，全不选，反选，提交练习</title>
</head>
<body>
	<form method='post' action=''>
		<input type='checkbox' id='checkedAllBox' value='全选'>
		<label for='checkedAllBox' id='alltext'>全选</label>
		<input type='button' class='checkedRevBt' value='反选'>
		<input type='button' class='submit' value='提交'>
		<br>
		
		<label><input type='checkbox' name='items' value='诸葛亮'>诸葛亮</label>
		<label><input type='checkbox' name='items' value='周瑜'>周瑜</label>
		<label><input type='checkbox' name='items' value='郭嘉'>郭嘉</label>
		<label><input type='checkbox' name='items' value='司马懿'>司马懿</label>
		
	</form>
<script>
let addEvent = document.addEventListener ?
	(elem,type,listener,useCapture)=>{
		elem.addEventListener(type,listener,useCapture);
	} : 
	(elem,type,listener,useCapture)=>{
		elem.attachEvent('on'+type,listener);
	};
let $ = selector=>{
	return [].slice.call(document.querySelectorAll(selector));
};
let checkedAllBox = $('#checkedAllBox')[0];
// console.log(checkedAllBox);
let oAlltext = $('#alltext')[0];
let oRevBt = $('.checkedRevBt')[0];
let oSubmit = $('.submit')[0];
let oList = $('input[name="items"]');
// console.log(oList);

addEvent(checkedAllBox,'click',()=>{
	for(let option of oList){
		// console.log(oList);
		option.checked = checkedAllBox.checked;
	}
	if(checkedAllBox.checked){
		oAlltext.innerHTML = '全不选';
	}else{
		oAlltext.innerHTML = '全选';
	}
});
addEvent(oRevBt,'click',()=>{
	for(let option of oList){
		option.checked = !option.checked;
	}
});
addEvent(oSubmit,'click',()=>{
	let options = [];
	for(let option of oList){
		if(option.checked){
			options.push(option.value);
		}
	}
	console.log(options);
});
</script>
</body>
</html>
猜你喜欢
