HTML復選框全選,全部選,反選案例


這是基於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>

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com