您的位置：首页 > Web前端 > JavaScript

初学Javascript--DOM全选反选练习

2018-08-11 23:46 155 查看

HTML内容

<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>

实现全选功能

var items = document.getElementsByName('items');//创建一个items对象用于统计长度
var allbtn = document.getElementById('checkedAllBtn');
allbtn.onclick = function (){

var  getCheckBox = document.getElementsByName("items");
for(var i = 0;i < items.length;i++)
{
getCheckBox[i].checked = true;
}

实现全不选功能

var nobtn = document.getElementById('checkedNoBtn');
nobtn.onclick = function (){
var noCheckBox = document.getElementsByName("items");
for(var i = 0;i<items.length;i++)
{
noCheckBox[i].checked = false;
}

}

实现利用多选框统一选择全选以及全不选功能

var checkAllBox = document.getElementById('checkedAllBox');
var check = false//创建一个check对象用于检查多选框的状态
checkAllBox.onclick = function(){
var  getCheckBox = document.getElementsByName("items");

if(check==false)//如果多选框处于未选择状态则为全选反之为全不选
{
for(var i =0;i<items.length;i++)
{
getCheckBox[i].checked = true;
check=true;
};
}
else{
for(var i =0;i<items.length;i++)
{
getCheckBox[i].checked = false;
check=false;
};

}
};

反选功能

var  checkedRevBtn = document.getElementById('checkedRevBtn');
checkedRevBtn.onclick = function(){
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实现
}
}

提交按钮实现

var subBtn = document.getElementById('sendBtn');
subBtn.onclick = function(){
var arr = [];
for(var i=0;i<items.length;i++)
{
if(items[i].checked==true)
{
arr.push(items[i].value);
}
}
alert(arr);
}

初学JS，还有许多东西还不熟练，觉得按钮与对象的绑定可以通过函数实现统一达到优化

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航