您的位置：首页 > Web前端

网页前端设计之多选按钮

2017-09-26 11:01 337 查看
本篇文章主要演示网页中多选的案例效果，



废话不多说，直接上代码

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

window.onload = function(){
selAll = document.getElementById("selAll");
hobbys = document.getElementsByName("hobby");
fx = document.getElementById("fx");

//全选事件
selAll.onclick = function(){
//全选
if(selAll.checked == true){
for (var i=0;i<hobbys.length;i++) {
hobbys[i].checked = true;
}
}else{
for (var i=0;i<hobbys.length;i++) {
hobbys[i].checked = false;
}
}
}

//反选
fx.onclick = function(){

for (var i=0;i<hobbys.length;i++) {
var b = hobbys[i];
if(b.checked == true){
b.checked = false;
}else{
b.checked = true;
}
}
}

}

</script>
</head>
<body>
<input type="checkbox" name="" id="selAll" />全选
<button id="fx">反选</button>
<br>
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />乒乓球
<input type="checkbox" name="hobby" />羽毛球
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航