js实现全选、反选、取消全选 - 软通乐学_js使用同一个函数,通过判断参数不同,实现按钮控制全选、全部取消、反选。-优快云博客

本文链接：https://blog.youkuaiyun.com/JsonWuxin/article/details/108220929

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮选择性别和兴趣</title>
	</head>
	<body>
		<input type="button" id="rBtn" value="选择性别"/>
		<input type="radio" name="sex" checked/>男
		<input type="radio" name="sex" />女
		<br />
		<br />
		<input type="button" id="checkBtn" value="全选"/>
		<input type="button" id="cancelBtn" value='取消全选' />
		<input type="button" id='inverseBtn' value="反选">
		<input type="checkbox" name="hobbies" />唱歌
		<input type="checkbox" name="hobbies" />跑步
		<input type="checkbox" name="hobbies" />写代码
		<input type="checkbox" name="hobbies" />跳舞
	</body>
	<script>
		var rBtn = document.getElementById('rBtn');
		var cBtn = document.getElementById('checkBtn');
		var hobbyObj = document.getElementsByName('hobbies');
		var cancelBtn = document.getElementById('cancelBtn');
		var inverseBtn = document.getElementById('inverseBtn');
		// 全选
		cBtn.onclick = function(){
			for(var i = 0 ; i < hobbyObj.length ;i++ ){
				hobbyObj[i].checked = true; 
			}
		}
		// 取消全选
		cancelBtn.onclick = function() {
			for(var i = 0 ; i < hobbyObj.length ;i++ ){
				hobbyObj[i].checked = false; 
			}
		}
		// 反选
		inverseBtn.onclick = function(){
			for(var i = 0 ; i < hobbyObj.length;i++){
				if(hobbyObj[i].checked == true){
					hobbyObj[i].checked = false;
				}else {
					hobbyObj[i].checked = true;
				}
			}
		}
	</script>
</html>