checkbox的三种状态——全选、部分选择、全不选

最新推荐文章于 2024-05-06 14:16:34 发布
最新推荐文章于 2024-05-06 14:16:34 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： element-ui 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liusixsixsix/article/details/109110248
版权 
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>

checkbox有三种状态全选(显示的’√’), 选中部分(显示的’-’), 全不选(啥都没显示)

对于indeterminate和v-model绑定的a和b的值

  • 如果true true 或者 true false样式为-

  • 如果false true样式为√

  • 如果false false样式为不勾

乐悠刘LL
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET Gridview与checkbox全选、全不选实现代码
10-29
ASP.NET Gridview checkbox全选与全不选实现代码，其实原理就是利用js来实现的，但需要简单的设置下回传。
js对表格中的checkbox,进行全选中、部分选中，全不选中
aaron2007
08-20 293
//判断所有的checkbox的选中状态 //@id : checkbox的id function checkedStatus(id){ //获取checkbox，如果子节点没有设置id，就得不到一部分checkbox var temp = document.getElementById(id); ...
jquery实现checkbox全选全不选的简单实例
10-26
本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
微信小程序重写checkbox的样式，将方块变成圆形 css
qq_45832807的博客
07-08 3353
/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */ } /* 选中后的 背景样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: 1rpx .
checkbox半选indeterminate属性
sunddy_x的博客
03-25 4053
今天做了一个checkbox复选框半选效果，效果如下图： 要想得到该效果，使用checkbox的indeterminate属性，表示复选框处于“尚未明确是否选取”状态。 在JS中，使用布尔属性对indeterminate属性进行赋值，当为true时，复选框将显示为不明状态，代码如下： var obj = document.getElementById("obj"); obj.in...
改变checkbox背景勾选样式
11-24
改变checkbox背景勾选样式
复选框checkbox的三种状态
The_Best_Hacker的博客
02-28 8145
checked的选中状态 不设置checked是默认不被选中的， 一旦设置checked="false"或者checked = true或者不设置任何值，都会被解释为选中。 &lt;input type="checkbox" name="test" id="test1"/&gt; //未被选中 &lt;input type="checkbox" name="test
JavaScript CheckBox实现全选和部分选择
weixin_34292287的博客
01-31 167
1 <html> 2 <head> 3 <script> 4 function BatchAddToBasket() { 5 var questionNums = ''; 6 var checkboxs = document.getElementsByName('q...
小成本实现部分选中的复选框
ywb201314的专栏
12-06 512
大家都知道，HTML 里复选框（checkbox）表示选中状态的 checked 属性，只有选中和没被选中两种情况。但有时候，我们还要表示「部分选中」状态：如实现树或表格勾选时，当用户选择一部分子记录，父记录的状态就应该是部分选择。 通常的做法 有很多方案可以实现这个需求，这里列举两个有代表性的简单介绍下： 1）利用 checkbox 自身其他属性来模拟。如下图，用 disabl
vue2+antd复选框（checkbox）实现全选反选与部分选择（js版本）
qq_43854041的博客
08-04 1762
例如：记录vue2+antd搭建的项目，关于checkbox全选，单选，和默认选择几个数据。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了checkbox的使用，而antd提供了大量能使我们快速便捷地处理数据的函数和方法。.........
jQuery实现CheckBox全选、全不选功能
10-20
主要介绍了jQuery实现CheckBox全选、全不选功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧
JS实现CheckBox复选框全选全不选功能
10-24
在网站的管理后台应用此功能居多，如一次性处理多个产品，或对文章的删除对产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，今天我就用简单的篇幅来讲解一下...
JQuery选中checkbox方法代码实例（全选、反选、全不选）
10-24
主要介绍了JQuery选中checkbox方法代码实例（全选、反选、全不选）,本文直接给出代码实例,需要的朋友可以参考下
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 514
createWs("测试数据", (res) => {
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 617
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
前端 | iframe框架标签应用（二）| 外部页面导入
因为健忘，所以记点有的没的〒▽〒
05-06 969
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
uni框架下的前端小知识
weixin_53908842的博客
04-30 364
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
组件化开发&根组件
最新发布
m0_74462339的博客
05-06 292
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
JavaScript：Web APIs（三）
ma_no_lo的博客
05-03 977
Js中事件流和基本阻止方式，包含load,scroll,resize事件
jQuery对checkbox 复选框的全选全不选反选的操作
06-08
可以使用以下jQuery代码实现对checkbox复选框的全选、全不选和反选操作： 全选： ```javascript $('input[type="checkbox"]').prop('checked', true); ``` 全不选： ```javascript $('input[type="checkbox"]').prop('checked', false); ``` 反选： ```javascript $('input[type="checkbox"]').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); ``` 以上代码中，`$('input[type="checkbox"]')` 选择所有的checkbox元素，`.prop('checked', true/false)` 设置是否选中，`!$(this).prop('checked')` 判断当前元素是否选中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值