复选框全选/全部选
程序员文章站
2023-12-25 23:44:03
复选框全选/全部选 ~~~javascript 你爱好的运动是什么？全选/全不选 足球 篮球 羽毛球 乒乓球 ~~~ 你爱好的运动是什么？全选/全不选 足球 篮球 羽毛球 乒乓球 ......
复选框全选/全部选
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
/*
全选按钮点击按钮以后，四个多选框全部被选中
*/
// 为idcheckedallbtn的按钮绑定一个单击相应函数
var item = document.getelementsbyname('items');
var checkedallbtn = document.getelementbyid('checkedallbtn');
checkedallbtn.onclick = function() {
//获取四个多选框items
// 遍历items
for (var i = 0; i < item.length; i++) {
// 设置四个多选框变成选中状态
// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
item[i].checked = true;
}
}
// 为checkednobtn的按钮绑定一个单击相应函数
var checkednobtn = document.getelementbyid('checkednobtn');
checkednobtn.onclick = function() {
//获取v
// 遍历items
for (var i = 0; i < item.length; i++) {
// 设置四个多选框变成选中状态
// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
item[i].checked = false;
}
}
// 为checkedrevbtn的按钮绑定一个单击相应函数
var checkedrevbtn = document.getelementbyid('checkedrevbtn');
checkedrevbtn.onclick = function() {
//获取四个多选框items
// 遍历items
for (var i = 0; i < item.length; i++) {
// 设置四个多选框变成选中状态
// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
item[i].checked = !item[i].checked;
}
}
// 为sendbtn的按钮绑定一个单击相应函数
var sendbtn = document.getelementbyid('sendbtn');
sendbtn.onclick = function() {
//获取四个多选框items
// 遍历items
console.log(123);
for (var i = 0; i < item.length; i++) {
// 设置四个多选框变成选中状态
// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
if(item[i].checked){
console.log(item[i].value);
}
}
}
//为checkedallbox的复选框绑定一个单击相应函数
var checkedallbox = document.getelementbyid('checkedallbox');
checkedallbox.onclick=function(){
for (var i = 0; i < item.length; i++) {
// 设置四个多选框变成选中状态
// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
item[i].checked=this.checked;
}
}
//为四个多选框分别绑定点击响应函数
for (var i = 0; i<item.length;i++){
item[i].onclick=function(){
//将checkedallbox设置为选中状态
checkedallbox.checked=true;
for(var j=0;j<item.length;j++){
// 判断四个多选框是否是全选
if(!item[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedallbox设置为没有选中状态
checkedallbox.checked=false;
// 一旦进入判断 则已经得出结果 不用再继续执行循环
break；
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是什么？<input type="checkbox" id="checkedallbox" value="" /><label for="checkedallbox">全选/全不选</label>
<br />
<input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label>
<input type="checkbox" name="items" id="2" value="篮球" /><label for="2">篮球<label>
<input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label>
<input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label>
<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>
<!doctype html>