利用js實現全選、反選、全不選(button)
阿新 • • 發佈：2018-02-06
put () false 全選 charset btn tel pre fun <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
window.onload=function(){
var allSelect=document.getElementById("allSelect");
var noSelect=document.getElementById("noSelect");
// 獲取所有的input標簽
var oDiv=document.getElementById("chk");
var chks=oDiv.getElementsByTagName("input");
allSelect.onclick=function(){
for(var i=0;i<chks.length;i++){
chks[i].checked=true; // 全部選中
}
};
noSelect.onclick=function(){
// 全不選
for(var i=0;i<chks.length;i++){
}
};
btn2.onclick=function(){
for(var i=0;i<chks.length;i++){
// 進行反選
chks[i].checked=!chks[i].checked;
}
};
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
window.onload=function(){
var allSelect=document.getElementById("allSelect");
var noSelect=document.getElementById("noSelect");
// 獲取所有的input標簽
var oDiv=document.getElementById("chk");
var chks=oDiv.getElementsByTagName("input");
allSelect.onclick=function(){
for(var i=0;i<chks.length;i++){
chks[i].checked=true; // 全部選中
}
};
noSelect.onclick=function(){
// 全不選
for(var i=0;i<chks.length;i++){
}
};
btn2.onclick=function(){
for(var i=0;i<chks.length;i++){
// 進行反選
chks[i].checked=!chks[i].checked;
}
};
};
</script></head>
<body>
<div id="top">
</div> <div id="container"> <input type="button" value="全選" id="allSelect"> <input type="button" value="反選" id="btn2"> <input type="button" value="不選" id="noSelect"> <hr size="5" color="white"> <div id="chk"> <input type="checkBox">籃球 <br> <input type="checkBox">羽毛球 <br> <input type="checkBox">乒乓球 <br> <input type="checkBox">足球 <br> <input type="checkBox">橄欖球 <br> <input type="checkBox">棒球 </div> </div>
</body>
</html>
利用js實現全選、反選、全不選(button)