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

HTML复选框全选，全部选，反选案例

2015-09-26 22:02 537 查看

这是基于html的一个简单的复选框的全选和全不选和反选案例，代码如下：

<html>
<head>
<title>Document</title>
</head>
<body>
<input type="checkbox" name = "sport"/>跑步<br/>
<input type="checkbox" name = "sport"/>游泳<br/>
<input type="checkbox" name = "sport"/>瑜伽<br/>
<input type="checkbox" name = "sport"/>足球<br/>
<input type="button" name = "selectall" value = "全选"    onclick="selectall()"/>
<input type="button" name = "selectnone" value = "全不选" onclick="selectnone()"/>
<input type="button" name = "selectback" value = "反选"   onclick="selectback()"/>
</body>
<script type ="text/javascript">
function selectall()
{
var sports = document.getElementsByName("sport");
for (i=0;i<sports.length ;i++ )
{
var sportname =sports[i];
sportname.checked= true;

}
}
function selectnone()
{
var sports = document.getElementsByName("sport");
for (i=0;i<sports.length ;i++ )
{
var sportname =sports[i];
sportname.checked= false;

}
}
function selectback()
{
var sports = document.getElementsByName("sport");
for (a=0;a<sports.length ;a++ )
{
var sportname1 =sports[a];
if(sportname1.checked==false)
{
sportname1.checked= true;
}else{
sportname1.checked=false
}

}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 代码 复选框 全选 全不选
相关文章推荐
新的分享
章节导航