js全选按钮

于 2022-05-07 21:39:33 发布
阅读量565 收藏
点赞数
文章标签： javascript elementui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43124006/article/details/124640023
版权

1.全选功能

<!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" class="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>

    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" class="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      /*1.先找到所有的按钮
      2.再找根据按钮 找到die  table
      3.再去查找具体的 input*/
      let checkAlls = document.querySelectorAll(".checkAll")

      for (let i = 0; i < checkAlls.length; i++) {
        checkAlls[i].addEventListener("change",function(){
          console.log(1);
          let table  = this.parentNode.parentNode.parentNode.parentNode
          console.log(table);
          let inputs = table.querySelectorAll(".ck")

          for (let j = 0; j < inputs.length; j++) {
              inputs[j].checked = checkAlls[i].checked

            
          }
        })
        
      }

    

 

    </script>
  </body>
</html>

结果如下：

 

 

J-Henry52
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多个input设置全选中的两种方式
qq_25261441的博客
11-10 1209
$（.bbbbbb）.each(function(){ 第一种this.checked=true 第二种$（this).prop(checked,checked) })
【ASP.NET】批量删除，获取type为checkbox的input选中状态
GreAmbWang的博客
09-01 812
效果 HTML代码 部分 复选框的value存储学生的ID <td>@Html.CheckBox("cb" + i, htmlAttributes: new { @class = "cbs", value = item.Id })</td> 生成的代码 <th><input id="cbAll" name="cbAll" type...
(JavaScript学习记录)：DOM 操作元素（续）
baidu_41388533的博客
09-28 262
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4 目录 操作元素 排他思想 案例：百度换肤 案例：表格隔行变色 案例：表单全选取消全选案例 自定义属性的操作 获取属性值 设置属性值 移除属性 案例：自定义属性 案例：tab 栏切换（重点案例） H5自定义属性 设置H5自定义属性 获取H5自定义属性 案例：H5自定义属性 操作元素 排他思想 如果.
html input全选框,input checkbox复选框全选与部分选中效果
weixin_39524959的博客
06-03 563
input checkbox复选框全选与不全选方法封装如下：html代码：预算编号预算表名称T27预算总表T28人员支出T29住房改革支出1T30住房改革支出2T31公用支出js代码：(function($){$.fn.extend({/*** 设置多选* @param {Object} obj string类型参数*/setCheckBoxState:function(obj){/*** 判断状...
用js编写全选/全不选/反选
m0_53679993的博客
04-13 2176
运行出来的图片： 在html的代码如下： 在这里插入代码片 ```<form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="chec
js全选按钮的实现方法
11-22
本文实例讲述了js全选按钮的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下：   具体代码如下 <html> <head> <title>复选框checked属性</title> [removed] function ...
JavaScript第一篇之实现按钮全选、功能
10-21
3. `checkAll`函数: 这个JavaScript函数接收一个参数`e`，即触发事件的元素（在这个例子中是全选按钮）。通过`getElementById`获取到全选按钮的当前状态（是否被选中），然后遍历所有`name="chk"`的复选框，将它们的...
全选按钮制作javascript脚本.html
05-26
用javascript编译的全选按钮制作javascript脚本.html
常用的js全选checkbox按钮的功能
03-01
这段JavaScript代码监听了全选复选框的改变事件，当用户点击全选按钮时，会遍历所有子复选框，并根据全选按钮的状态（ checked 或 unchecked ）设置它们的状态。这使得用户可以通过一个操作就完成对所有子项的选择，...
JavaScript复选框（全选/全不选 反选）
丑小鸭
08-04 7232
实例代码： 1 JS代码： &lt;script type="text/javascript"&gt;    window.onload=function(){           function myClick(id,fun){          var btn=document.getElementById(id);          btn.onclick=fun;      }   ...
JavaScript实现复选框全选与全不选的效果
穆雄雄的博客
10-25 439
//里面涉及到几张图片，有需要的可以联系我要，直接私信我就行，每天在这个点都会上线，看到就回，或者从我的资料里面找我的联系方式，收到之后会发给你们的 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
webjs--全选和全不选的复选框
dongmelon的博客
06-06 778
html 全选 水浒传 西游记 红楼梦js //点击全选按钮的函数 function cd(){ if ($("#all").prop("checked")){ $("#all").nextAll().prop("checked",true) //全选 }else {
html input text 得到焦点后自动全选
热门推荐
lcczzu的专栏
08-18 2万+
自动全选 onfocus=”this.select()” onmouseover=”this.focus()” 按一下全选 onfocus=”this.select()”
JS全选按钮练习
weixin_30882895的博客
09-05 86
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
js实现全选功能
zhaojianyin
08-23 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选练习</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("all"); btn
案例--input全选 与 复选框
tby_pr的博客
10-13 1202
需求: 1. 点击全选按钮的复选框的时候 => 如果全选按钮是选中状态, 那么每一个选项都是选中 => 如果全选按钮是未选中状态, 那么每一个选项都是未选中 2. 每一个选项按钮点击的时候 => 都有可能影响全选按钮的选中状态 => 当点击任何一个选项按钮的时候 -> 如果所有选项按钮都是选中状态, 那么全选按钮选中 -> 只要有任何一个选项按钮是未选中状态, 那么全选按钮未选中 分析: ...
复选框选中和不选中分别取值取值问题
依稀梦兮的博客
04-28 1058
//当复选框选中时进入IF语句，否则不会进入 if (true == $('#复选框ID').is(':checked')) { $(this).val(); }
Jquery判断复选框 input type = checkbox 全部选中 ；全部不选中；其中不选中 则 全部就不能被选中；
qq_29596627的博客
07-08 1942
//全部选中 过滤报警信息设置     $("#AllChecked").click(function () {         if ($('#AllChecked').is(':checked')) {             $('.Set_check2').prop('checked', true);             $("input[name='Checked']").v

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值