js入门篇--全选案例

最新推荐文章于 2025-02-07 17:08:00 发布

原创最新推荐文章于 2025-02-07 17:08:00 发布 · 354 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js全选

javascript 专栏收录该内容

6 篇文章

订阅专栏

<body>
 	<input type="checkbox" "selOfNot(this)">全选/全不选
<div style="margin:10px;">
  	 <input type="checkbox" name="hobby">篮球
 	  <input type="checkbox" name="hobby">看电影
  	  <input type="checkbox" name="hobby">打游戏
	  <input type="checkbox" name="hobby">旅游
	  <input type="checkbox" name="hobby">学习 
</div>
 <div>
  	<button type="button" "selAll()">全选</button>
 	 <button type="button" "notAll()">全不选</button>
  	<button type="button" "revSel()">反选</button>
 </div>
 <script type="text/javascript">
 	//获取元素集合
  	var hobbys = document.getElementsByName("hobby");
  	function selOfNot(obj){
  	 if (obj.checked==true) {
  	  selAll(); 
  	 }else{
 	   notAll();
 	  }
  	 }
 //全选

function selAll(){
   	for(var i=0;i<hobbys.length;i++){
  	  var e=hobbys[i];
  	  e.checked = true;
 	  }
  }
//全不选
function notAll(){
	   for(var i=0;i<hobbys.length;i++){
  	  var e=hobbys[i];
 	   e.checked=false;
   	}
  }

//反转
function revSel(){
 	  for(var i=0;i<hobbys.length;i++){
   	 var e=hobbys[i];
 	   if (e.checked==true) {e.checked=false;}
 	   else{e.checked=true;}
   	}
  }
</script>
</body>