js复选框事件

最新推荐文章于 2024-07-04 00:59:27 发布

kevin_love_it

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量1.9k

点赞数 1

分类专栏： servlet/jsp javaScript/jquery 文章标签： javascript

javaScript/jquery 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

servlet/jsp

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框事件</title>
<script type="text/javascript">
	window.οnlοad=function(){

		// 全选
		var checkbox = document.all('checkbox');
		var checkAll = document.getElementById('checkAll');
		checkAll.addEventListener('click',function(){
			if(checkbox.length==undefined){
				checkbox.checked=checkAll.checked;
			}else{
				for(var i=0;i<checkbox.length;i++){
					checkbox[i].checked=this.checked;
				}
			}
		},false);

		//	全选自动取消
		if(checkbox.length=undefined){
			checkbox.addEventListener('click',function(){
				checkbox.checked=checkAll.checked;
			},false);
		}else{
			for(var i=0;i<checkbox.length;i++){
				checkbox[i].addEventListener('click',function(){
					for(var i=0;i<checkbox.length;i++){
						if(!checkbox[i].checked){
							checkAll.checked=false;
							break;
						}
						if(i==checkbox.length-1){
							checkAll.checked=true;
						}
					}
				},false);
			}
		}

		// 打印出选择的文字
		document.getElementById('selecteBtn').addEventListener('click',function(){
			var yourchoose='您选择的爱好有：';
			if(checkbox.length==undefined){
				var yourchoose = checkbox.value;
			}else{
				for(var i=0;i<checkbox.length;i++){
					if(checkbox[i].checked)
						yourchoose += checkbox[i].value+"  ";
				}
			}
			alert(yourchoose);
		},false);
	}
</script>
</head>
<body>
	<form action="">
         您的爱好有:<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>
         <input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>
         <input type="button" name="selecteBtn" id="selecteBtn" value="选择">
     </form>
</body>
</html>

kevin_love_it

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js复选框事件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->复选框事件 window.onload=function(){ // 全选 var checkbox = document.all('checkbox'); var checkAll
复制链接

扫一扫