JavaScript对表单元素复选框的设置（多选）

JavaScript

一、效果图

二、index.html部分

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
  <form>
  	<input type="checkbox" name="interest" value="1"/><label>游泳</label>
  	<input type="checkbox" name="interest" value="2"/><label>爬山</label>
  	<input type="checkbox" name="interest" value="3"/><label>看书</label>
  	<input type="checkbox" name="interest" value="4"/><label>听歌</label>
  	<input type="button" id="btn1" value="全选" onclick="checkInterest()">
  	<input type="button" value="反选" onclick="checkInterest1()">
  </form>
</body>
</html>

三、index.js部分

var flag=true;
function checkInterest(){
	var interest=document.getElementsByName("interest");
	for(i=0;i<interest.length;i++){
		interest[i].checked=flag;
	}
	if(flag){
		document.getElementById("btn1").value="全不选";
	}else{
		document.getElementById("btn1").value="全选";
	}
	flag=!flag;//开关变量
}

function checkInterest1(){
	var interest=document.getElementsByName("interest");
	for(i=0;i<interest.length;i++){
		interest[i].checked=!interest[i].checked;
		//console.log(interest[i].value);//测试显示后台获得的值，此处无需写
	}
}
posted @ 2020-08-14 13:26  AlanHong  阅读(348)  评论(0)    收藏  举报