简单js语言操作——全选复选框功能

最新推荐文章于 2022-08-28 20:54:31 发布

GjGo

最新推荐文章于 2022-08-28 20:54:31 发布

阅读量280

点赞数

分类专栏： javascript 文章标签： js checkbox html

本文链接：https://blog.csdn.net/weixin_45603128/article/details/104024994

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在编写购物车页面可以使用，购物车商品太多一个一个选太费时间。全选功能代码如下：

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>复选框全选按钮</title>
<script>
 window.onload=function(){
 //获取全选按钮：id=all
 //获取爱好复选按钮组：name=hobby(元素name来获取)
  var oCa=document.getElementById("all");
  var oCh=document.getElementsByName("hobby");
  oCa.onclick=function(){
   //执行全选或取消全选的功能
  allcheck(oCa,oCh);
  }
 }
 function allcheck(ac,ca){
  if(ac.checked){
  for(var i=0;i<ca.length;i++)
  ca[i].checked=true;
  }
  else{
  for(var i=0;i<ca.length;i++)
  ca[i].checked=false;
  }
 }
</script>
</head>
<body>
<form action="" method="">
 <input type="checkbox" name="hobby" id="">看书  
 <input type="checkbox" name="hobby" id="">旅游
 <input type="checkbox" name="hobby" id="">运动
 <input type="checkbox" name="hobby" id="">音乐
 <br>
 <input type="checkbox" name="allcheck" id="all">
 <label for="all">全选</label>
<form> 
</body>
</html>

GjGo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
简单js语言操作——全选复选框功能

在编写购物车页面可以使用，购物车商品太多一个一个选太费时间。全选功能代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <title>复选框全选按钮</title><script> window.onload=function(){ //...
复制链接

扫一扫