Article Introduction: JS Practice Example: JavaScript implementation of the full choice/All-select/reverse. |
JavaScript for full-selection/All-selection/anti-selection function
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "TEXT/HTML;CHARSET=GBK"/>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
ul{
List-style-type:none;
}
#wrap {
width:150px;
margin:50px Auto;
}
</style>
<title></title>
<body>
<div id= "Wrap" >
<input type= "button" id= "Selecte_all" value= "Select All"/>
<input type= "button" id= "Selecte_no" value= "all do not choose"/>
<input type= "button" id= "Selecte_etr" value= "anti-election"/>
<ul>
<li><input type= "checkbox" class= "about"/> Data </li>
<li><input type= "checkbox" class= "about"/> CV </li>
<li><input type= "checkbox" class= "about"/> Experience </li>
<li><input type= "checkbox" class= "about"/> Hobby </li>
<li><input type= "checkbox" class= "about"/> Other </li>
</ul>
</div>
<script type= "Text/javascript" >
Window.onload=init;
function init () {
var Selecte_all=document.getelementbyid (' Selecte_all ');
var Selecte_no=document.getelementbyid (' Selecte_no ');
var Selecte_etr=document.getelementbyid (' Selecte_etr ');
var check_list=document.getelementsbyclassname (' about ');
Selecte_all.onclick=function () {
for (i=0;i<check_list.length;i++) {
Check_list[i].checked=true;
};
}
Selecte_no.onclick=function () {
for (i=0;i<check_list.length;i++) {
Check_list[i].checked=false;
};
}
Selecte_etr.onclick=function () {
for (i=0;i<check_list.length;i++) {
check_list[i].checked=!check_list[i].checked;
};
}
}
</script>
</body>