checkbox的全选和不全选

最新推荐文章于 2024-06-16 10:48:24 发布
最新推荐文章于 2024-06-16 10:48:24 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： Javascript php 文章标签： checkbox HTML jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyj_15067066062/article/details/54706428
版权

首先是布局，很简单的。

 

布好局之后我们再来实现这个checkbox的全选和不全选的功能，给全选一个id


然后根据这个id来进行全选的操作，给全选checkbox绑定单机事件，分两个种情况，一是全选，二是不全选


第一种情况实现全选，就是将子checkbox的checked属性为true即可，

第二种情况实现取消全选，就是将子checkbox的checked属性改为false即可。

扩展：

获取循环遍历出来的每一行的id：

先定义一个数组，用来放每一行的id，每一行的id需要遍历一下才能获取到，不然永远只能获取第一行的id，所以就要用到jQ中的.each进行遍历。

.push方法将获取到的id压入到之前定义好的空数组中，如果是需要用到字符就用.join方法将数组中构建成一个字符串

ZYJ~
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
winform DataGridView表头带CheckBox全选
03-22
在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便实现全选和全不选的功能。这将大大提升用户体验，使得用户可以快速地对所有行进行操作，如批量删除、更新等。 首先，我们需要...
jquery实现checkbox全选全不选的简单实例
10-26
本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
checkbox全选和反选以及取消
73
12-15 378
很多网站页面上面经常可以看到，在每一条记录的前面会有一个一个选择框，下面这个例子实现了一键完成全选，一键完成反选，一键完成取消。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
checkbox全选、全不选
祁梦@
03-18 1377
// 全选、全不选事件 function checkAll() { let allCheck = document.getElementById('allCheck'); let chBox = document.getElementsByName('addressCode'); let len = chBox.length; for (let i = 0; i < len; i++) { // 当...
uniapp中checkbox的可选数量控制及选中value获取
最新发布
学无止尽
06-16 579
使用element-ui时，可以使用checkbox组件的max、min属性直接控制最多、最少可以选中几个复选框。但使用uniapp时，没有max、min属性，应该怎么控制呢？3、监听复选框变更事件，获取该复选框变更事件（取消或选中）以及该复选框的name属性值，以便做业务处理。2、若已选数量为最大允许值，其他复选框变灰，不可再选，但已选复选框可以进行取消勾选；1、监听复选框组的变更事件，获取已选复选框的数量，判断已选数量是否为最大允许值；
uni-app checkbox全选 和取消全选
muge1161105403的博客
07-09 6520
1.代码如下： <template> <view class="content"> <view class="top"> <checkbox-group @change="seletedStatus" checked> <checkbox :value="item.value" v-for="(item,index) in items" :key="index" :checked="checkList.includes(String(
一行jQuery代码搞定checkbox 全选和全不选
合格程序猿
04-01 295
让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；
10.el-checkbox全选
yujiabao702的博客
04-04 405
思路：定义一个变量 incheckedAll 表示是否全选，在 el-checkbox-group 外层单独写一个 el-checkbox 用来表示全选，给 el-checkbox-group 和 el-checkbox 都绑定 change 事件。需求：实现复选框多选功能。
checkbox全选和取消全选
@风的博客
09-24 440
今天工作项目终于到批量审核操作，当然会涉及到checkbox全选和取消全选操作，   其实思路很简单，通过js获取页面的所有的checkbox标签，通过改变checkbox的checked属性的值 function checkAll()  {  var code_Values = document.all['code_Value'];  if(code_Values.length
checkbox全选不选反选代码
weixin_43755104的博客
11-24 143
checkbox全选不选反选代码 自用copy 效果 <script type="text/javascript"> window.onload = function(){ var odiv1= document.getElementById('div1'); var obut1 = document.getElementById('but1'); var obut...
Checkbox全选反选
weixin_43332393的博客
09-27 1128
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
layui checkbox 全选与不全选
Khun_HWJ的博客
09-04 703
<form class="layui-form inline-form"> <input type="checkbox" name="all" title="全选" lay-skin="primary" lay-filter="checkboxall"> <button type="button" class="layui-btn layui-btn-sm fontColorbgF65" title="批量删除" data-role="batchdelbtn">&l.
checkbox全选与全不选的问题
suming000的专栏
02-15 240
prop('checked',true) 和 prop('checked',false) 就不会出现这个问题了。)，那么只能使用一次，第二次使用的时候就没法全选了，后来查了一下，原来jquery1.8以上存在这个问题。今天遇到一个问题，就是js进行全选和全不选时，如果使用的是。是 attr('checked',true) 和。
Jquery 1.42 checkbox 全选和反选代码
10-29
在网页交互设计中，全选和反选功能是常见的用户操作需求，特别是在处理多选列表时。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务。在这个例子中，我们将详细解析如何使用jQuery...
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
在本例中，我们使用jQuery来实现CheckBox全选/取消全选和CheckBox遍历。首先，我们在HTML中创建一个CheckBox组，并添加一个全选/取消全选的CheckBox： ```html <input type="checkbox" name="chk_list" id="chk_...
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
jQuery怎么根据某个特定的值动态让select下的option选中
热门推荐
在工作中记录下美好的瞬间~~
05-04 4万+
这里以默认选中当前月为例： HTML： <select name="MONAT" id="MONAT"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ...
jQuery实现获取年月日的一些方法总结
在工作中记录下美好的瞬间~~
05-04 2万+
用jq来获取当前的时间： $(function(){ var myDate = new Date; var year = myDate.getFullYear();//获取当前年 var yue = myDate.getMonth()+1;//获取当前月 var date = myDate.getDate();//获取当前日 var h = myDat
PHP获取当前文件的绝对路径
在工作中记录下美好的瞬间~~
11-10 1万+
dirname(__FILE__) 取到的是当前文件的绝对路径，也就是说，比起相对路径，查找速度是最快的。  如果重复一次可以把目录往上提升一个层次:  比如：$d = dirname(dirname(__FILE__));  其实就是把一个目录给dirname()做参数了．因为dirname()返回最后的目录不带\\或者是/  所以重复使用的时候可以认为　dirname()　把最下层的目
jq实现checkbox全选全不选
05-23
你可以使用以下的代码来实现checkbox全选/全不选的功能： ```javascript // 全选/全不选 $('#all').click(function() { $('input[name="checkbox"]').prop('checked', this.checked); }); // 单个checkbox点击事件 $('input[name="checkbox"]').click(function() { var flag = true; $('input[name="checkbox"]').each(function() { if (!this.checked) { flag = false; } }); $('#all').prop('checked', flag); }); ``` 其中，`#all` 是全选的checkbox的id，`input[name="checkbox"]` 是所有需要被全选/全不选的checkbox的选择器。 第一个函数会在全选的checkbox被点击时触发，将所有的checkbox的 `checked` 属性设置成与全选checkbox相同。 第二个函数会在单个checkbox被点击时触发，如果所有的checkbox都被选中，那么全选的checkbox也会被选中，否则不选中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值