<%@ 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>
js复选框事件
最新推荐文章于 2024-09-02 10:35:06 发布