44
利用js实现全选、反选、全不选(button)-03251108-51CTO博客
source link: http://blog.51cto.com/11871779/2069358
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
03251108 > 正文
利用js实现全选、反选、全不选(button)
<!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");
var btn2=document.getElementById("btn2");
// 获取所有的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++){
chks[i].checked=false;
}
};
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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK