|
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script type="text/javascript">
?? ??? ?window.οnlοad=function(){
?? ??? ??? ?/*
?? ??? ??? ?*全选按钮
?? ??? ??? ?* -点击按钮以后，四个框全部被选中
?? ??? ??? ?*/
?? ??? ? ? //1、#checkedAllBtn
?? ??? ? ? //为id为checkedAllBtn的按钮绑定一个单击响应函数
?? ??? ? ? var checkedAllBtn=document.getElementById("checkedAllBtn")
?? ??? ? ? var items = document.getElementsByName("items");
?? ??? ? ? var checkedAllBox = document.getElementById("checkedAllBox");
?? ??? ? ? checkedAllBtn.οnclick=function(){
?? ??? ??? ??? ?//获取四个多选框items
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?//遍历items
?? ??? ??? ??? ?
?? ??? ??? ??? ?for(var i=0;i<items.length;i++){
?? ??? ??? ??? ??? ?//设置四个多选框为选中状态
?? ??? ??? ??? ??? ?//通过多选框的checded属性可以来获取或设置多选框的选中状态
?? ??? ??? ??? ??? ?items[i].checked=true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?checkedAllBox.checked=true;
?? ??? ? ? }?
?? ??? ? ??
?? ??? ? ? /*
?? ??? ? ? *全不选按钮
?? ??? ? ? * -点击按钮以后，四个框全部不选中
?? ??? ? ? */
?? ??? ??? ?var checkedNoBtn =document.getElementById("checkedNoBtn")
?? ??? ??? ?checkedNoBtn.οnclick=function(){
?? ??? ??? ??? ?for(var i=0;i<items.length;i++){
?? ??? ??? ??? ??? ?//设置四个多选框为选中状态
?? ??? ??? ??? ??? ?//通过多选框的checded属性可以来获取或设置多选框的选中状态
?? ??? ??? ??? ??? ?items[i].checked=false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?checkedAllBox.checked=false;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/*
?? ??? ??? ?* 反选按钮
?? ??? ??? ?* - 点击按钮以后选项变成相反
?? ??? ??? ?*/
?? ??? ? ? ?var checkedrevBtn = document.getElementById("checkedRevBtn");
?? ??? ??? ?checkedrevBtn.onclick = function(){
?? ??? ??? ??? ?checkedAllBox.checked = true;
?? ??? ??? ??? ?for(var i=0;i<items.length;i++){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//判断多选状态
?? ??? ??? ??? ??? ?// if(items[i].checked){
?? ??? ??? ??? ??? ?// ?? ?items[i].checked = false;
?? ??? ??? ??? ??? ?// }else{
?? ??? ??? ??? ??? ?// ?? ?items[i].checked = ture;
?? ??? ??? ??? ??? ?// }
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?items[i].checked = !items[i].checked;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(!items[i].checked){
?? ??? ??? ??? ??? ??? ? checkedAllBox.checked = false;
?? ??? ??? ??? ??? ??? ? //一旦进入判断，已经有结果，不用继续循环
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ?}
?? ??? ??? ?/*
?? ??? ??? ?*提交按钮
?? ??? ??? ?* - 点击按钮以后，将所有选中的多选框的value属性值弹出
?? ??? ??? ?*/
?? ??? ??? ?var sendBtn = document.getElementById("sendBtn");
?? ??? ??? ?sendBtn.onclick = function(){
?? ??? ??? ??? ?for(var i=0;i<items.length;i++){
?? ??? ??? ??? ??? ?if(items[i].checked){
?? ??? ??? ??? ??? ?alert(items[i].value)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/*
?? ??? ??? ?*全选/全不选 多选框
?? ??? ??? ?* - 当他选中时，其他全选，当他不选时，其他全不选
?? ??? ??? ?*?
?? ??? ??? ?* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
?? ??? ??? ?*/
?? ??? ?
?? ??? ? ? checkedAllBox.οnclick=function(){
?? ??? ??? ? ? //设置多选框的选中状态
?? ??? ??? ? ? for(var i=0;i<items.length;i++){
?? ??? ??? ??? ??? ?items[i].checked=checkedAllBox.checked;
?? ??? ??? ? ? }
?? ??? ? ? }
?? ??? ? ??
?? ??? ? ? /*items
?? ??? ? ? *如果四个多选框都选中，则checkedAllBox也应该选中
?? ??? ? ? *如果四个多选框都没有选中，则checkedAllBox也不应该选中
?? ??? ? ? */
?? ??? ? ?
?? ??? ? ?//为四个多选框分别绑定点击响应函数
?? ??? ? ?for(var i =0;i<items.length;i++){
?? ??? ??? ? ?items[i].οnclick=function(){
?? ??? ??? ??? ? ?
?? ??? ??? ??? ? ?//将checkedAllBox设置为选中状态
?? ??? ??? ??? ? ?checkedAllBox.checked = true;
?? ??? ??? ??? ? ?
?? ??? ??? ??? ? ?
?? ??? ??? ??? ? ?for(var j =0;j<items.length;j++){
?? ??? ??? ??? ??? ? ?//判断四个多选框是否全选
?? ??? ??? ??? ??? ? ?//只要有一个没中 则就不是全选
?? ??? ??? ??? ??? ? ?if(!items[j].checked){
?? ??? ??? ??? ??? ??? ? ?checkedAllBox.checked = false;
?? ??? ??? ??? ??? ??? ? ?//一旦进入判断，已经有结果，不用继续循环
?? ??? ??? ??? ??? ??? ? ?break;
?? ??? ??? ??? ??? ? ?}
?? ??? ??? ??? ? ?}
?? ??? ??? ? ?}
?? ??? ? ?}
?? ??? ? ??
?? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<form method="post" action="">
?? ??? ??? ?你爱好的运动时？<input type="checkbox" id="checkedAllBox" />全选/全不选
?? ??? ??? ?
?? ??? ??? ?<br />
?? ??? ??? ?<input type="checkbox" name="items" value="足球" />足球
?? ??? ??? ?<input type="checkbox" name="items" value="篮球" />篮球
?? ??? ??? ?<input type="checkbox" name="items" value="羽毛球" />羽毛球
?? ??? ??? ?<input type="checkbox" name="items" value="乒乓球" />乒乓球
?? ??? ??? ?<br />
?? ??? ??? ?<input type="button" id="checkedAllBtn" value="全 选" />
?? ??? ??? ?<input type="button" id="checkedNoBtn" value="全不选" />
?? ??? ??? ?<input type="button" id="checkedRevBtn" value="反 选" />
?? ??? ??? ?<input type="button" id="sendBtn" value="提 交" />
?? ??? ??? ?
?? ??? ?</form>
?? ?</body>
</html>
|