javascript学习&全选练习
程序员文章站
2024-02-26 19:15:22
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
var checkedAllBox=document.getElementById("checkedAllBox");
/* 全选按钮
点击此按钮以后,四个多选框全都被被选中 */
//为id 为checkedAllBtn 绑定一个单击响应函数
var checkedAllBtn=document.getElementById("checkedAllBtn");
checkedAllBtn.onclick=function(){
//设置四个多选框选中状态、
var items=document.getElementsByName("items");
//遍历 items
for(var i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked 属性可以来获取或者设置多选框的选中状态
//设置四个多选框变成选中状态
items[i].checked=true;
}
checkedAllBox.checked=true;
};
//全不选按钮
var checkedNoBtn=document.getElementById("checkedNoBtn");
checkedNoBtn.onclick=function(){
//将四个多项框设置成为没选中的状态
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++)
{
items[i].checked=false;
}
checkedAllBox.checked=false;
};
//点击按钮以后选中的变成没选中，没选中的变成选中
var checkedRevBtn=document.getElementById("checkedRevBtn");
checkedRevBtn.onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++)
{
// if(items[i].checked){
// //证明多选框已经需那种，则设置为选中状态
// items[i].checked=false;
// }
// else{
// //证明多选框为没选中
// items[i].checked=true;
// }
items[i].checked=!items[i].checked;
}
//在反选的时候也需要判断四个多选框是否全部选中
checkedAllBox.checked=true;
for(var j=0;j<items.length;j++)
{
//判断四个多选框是否全选
if(!items[j].checked)
{
//一旦进入判断，则证明不是全选状态
//将checkedAllBox 设置为选中状态
checkedAllBox.checked=false;
//一旦进入判断则已经得出，不用再进入循环
break;
}
}
};
//提交按钮
//点击按钮,将所选框弹出,弹出的是value 属性值
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=function(){
var items=document.getElementsByName("items");
//遍历items
for(var i=0;i<items.length;i++)
{
//判断多选框是否选中
if(items[i].checked)
{
alert(items[i].value);
}
}
};
//全选/全不选多选框
//当他选中的时候,其余的未选中
//当它取消的时候其余的也取消
//为checkedAllBox绑定单击函数
//需要注意的是在事件的响应函数中，响应函数是给谁绑定的,this 就是谁
var checkedAllBox=document.getElementById("checkedAllBox");
checkedAllBox.onclick=function(){
var items=document.getElementsByName("items");
//设置多选个框的选中状态
for(var i=0;i<items.length;i++)
{
items[i].checked=this.checked;
/* items[i].checked=checkedAllBox.checked; */
}
};
//如果者四个全选框全部都选中的话，则checkedBox也应当选中
//如果四个多选框都没选中，则checkedBox 也不应当选中
//为四个多选框分别绑定单击响应事件
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++)
{
items[i].onclick=function(){
//设置checkbox 为选中状态
checkedAllBox.checked=true;
for(var j=0;j<items.length;j++)
{
//判断四个多选框是否全选
if(!items[j].checked)
{
//一旦进入判断，则证明不是全选状态
//将checkedAllBox 设置为选中状态
checkedAllBox.checked=false;
//一旦进入判断则已经得出，不用再进入循环
break;
}
}
};
}
//将全选/全不选设置为选中状态
checkbox
}
</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>
结果：
上一篇： java使用nio2拷贝文件的示例
下一篇： python-1000以内的完数