实现checkbox全选打钩及消除，点击单个checkbox打钩及消除JS代码实现

最新推荐文章于 2024-04-02 11:10:24 发布
最新推荐文章于 2024-04-02 11:10:24 发布
阅读量2.9k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011705317/article/details/25238577
版权
这段JS代码实现了Checkbox的全选和取消全选功能。当用户点击'全选'Checkbox时，所有Checkbox会被选中，背景图片更改为勾选状态；反之，取消全选时，所有Checkbox背景恢复。同时，单个Checkbox的点击事件也进行了处理，切换其选中状态。
摘要由CSDN通过智能技术生成
<script type="text/javascript">
$(function(){
    $('.checkbox3').bind('click',function(){
var _this = $(this);
        var checkCss    = 'url(/App/Modules/Notice/Public/Img/bullelin.png) 0 -144px no-repeat';
        var noCheckCss  = 'url(/App/Modules/Notice/Public/Img/bullelin.png) 0 -94px no-repeat';
        var flag = _this.attr('x-data');
var nowFlag = 0; 
        if(flag==0){

           nowFlag = 1;
           _this.attr('x-data',nowFlag);
           _this.css('background',checkCss);
 
        }else{
           nowFlag = 0;
           _this.attr('x-data',nowFlag);
           _this
最低0.47元/天 解锁文章
huifdlcs
关注
专栏目录
js接收后端数据回显checkbox打上勾
jaryle的专栏
12-29 1万+
js一般直接接收springmvc后端传递过来的数据，数据一般通过model过来，里面存放的是对象，js中一般不能处理对象数据，所以在controller层把对象数据进行重新封装成（字符串等js可以识别的数据），例如：controller传递过来的是一个包含多个id的list集合，里面存放的是对象，就需要在controller层对这个list集合进行遍历，获取每个id然后，使用字符串存取，然后通过
javascript 实现 全选全消容器内的checkbox 通用函数
jiangfeng的专栏
08-20 913
//全选全消容器内的checkboxfunction SelectAllCheckBox(bol,containerName){    var boolchecked=false;    var container=document.getElementById(containerName);    if(container==null){return;}    var CBS=container
html 点击打钩再点击取消,写了checkbox按钮点击显示与隐藏，标签里设定了默认打钩就完全相反了，该怎么判断？...
weixin_35853363的博客
06-22 266
function show(id){if(document.getElementById(id).style.display == "block"){document.getElementById(id).style.display = "none";}else if(document.getElementById(id).style.display == "none"){document.get...
[Web前端应用]--用Javascript实现多选框全选的功能 【难度★★★★】
Web_in的博客
06-12 243
邮件系统以及迅雷等软件经常会有“全选择”“全删除”或当前页“全打钩”等功能，实现这一功能的代码参考如下： 【代码】--实现多选框全选择 function chooseAll(){ ······//省略部分代码 var items = document.getElementByTagName("input"); for(var i = 0; i < items....
mysql里面的打钩框是什么东西_jquery 如何对checkbox打勾，取消打勾，打勾判断呢？...
weixin_39601088的博客
01-28 271
摘要：下文讲述使用jquery框架操作checkbox的方法分享，如下所示；实现思路:1.对多选框进行打勾操作$("#checkboxId").attr("checked",true);2.取消多选框打勾操作$("#checkboxId").attr("checked",false);3.判断checkbox是否被打勾的操作if($("#checkboxId").is(':checked')==f...
js实现checkbox全选和反选示例
10-26
综上所述，实现checkbox全选与反选功能主要依赖于对`checked`属性的操作，同时需要对JavaScript中的各种事件有所了解，这样才能构建出具有交互性的Web页面。在实际开发过程中，我们通常需要根据具体需求，灵活运用...
Javascript实现CheckBox的全选与取消全选的代码
10-29
接下来，通过在每个复选框的onclick事件中调用checkAll或clearAll函数，并传入当前复选框的name属性作为参数，实现点击单个复选框触发全选或取消全选的功能。示例代码展示了如何将这一逻辑应用于两个具有不同name...
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
比较全的JS checkbox全选、取消全选、删除功能代码
10-30
根据提供的文件信息，我们将讨论关于JavaScript（JS）中操作复选框（checkbox）的全选、取消全选和删除功能的实现。以下是详细的解释： ### 知识点一：全选与取消全选操作 在HTML中，复选框通常用于允许用户从一组...
js checkbox全选 反选 取消全部设置表单html复选框勾选
11-24
js checkbox全选 反选 取消全部设置表单html复选框勾选
JavaScript自动勾全选和取消全选
dsadada23的博客
08-22 2193
在查看列表数据时，当我们想选中一条数据的时候，勾选一下就选中一条数据，如果说列表的数据有很多条很多页，那对用户也太不友好了。
查询时，清空checkbox
kobe16champion的专栏
09-15 1412
<br />checkbox的清空分两步：清空打勾样式和清空pages属性QU_PROJECT_STATE的值<br />代码：<br />//设置checkbox样式上的非选中，清空pages属性QU_PROJECT_STATE的值<br /> $("QU_PROJECT_STATE1").checked = false;<br /> $("QU_PROJECT_STATE2").checked = false;<br /> $("QU_PROJECT_STATE3").checked = false;<
jquery1.6中的.prop()和.attr()异同
别人在走，我在跑
05-17 837
最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。下面根据这篇博文（javascript:mctmp(0);），简要翻译了.prop()和.attr()的用法： 1、从1.5.2升级到1.6.1 通过...
php 复选框 未选,jQuery 1.9+版本中修改checkbox的check属性但界面显示未选中问题的解决办法...
weixin_42396058的博客
03-24 225
通常情况下，我们都是通过 jQuery 的 attr 属性来设置或返回被选元素的属性值的，但是今天在用的时候遇到了一个问题，就是“当要取消已选中的 checkbox 时，弹出确认框，如果用户点击 ‘取消’，则将 checkbox 重新设置为选中状态”。我是通过 jQuery 的 attr 方法来修改选中状态的，代码如下：if(confirm('确定取消选择？')){alert('取消成功')}el...
vue 实现checkbox选中，在上面显示选中的数据，删除取消选中并删除显示的数据...
梁小茹的博客
12-12 3299
实现勾选选中和删除取消
css实现更改checkbox的样式；更改checkbox选中后的背景色；更改checkbox选中后的icon
最新发布
Sunny_lxm的博客
04-02 2152
css实现更改checkbox的样式；更改checkbox选中后的背景色；更改checkbox选中后的icon
JavaScript脚本实现网页批量自动勾选及内容填写
bangujiao8042的博客
06-08 4554
我们知道，大部分学校每个学期都有教学评估。对于我这种习惯性好评，老师又真心不错的人，十多个老师的评价都是good，这是赤裸裸的重复劳动啊。于是我动了歪念头...嘿嘿嘿 1.登录教学评估的网页，选择一位老师： 如： 2.右键查看元素，选择控制台： 3.在控制台输入代码：（第一次会有安全警告，按提示输入允许的命令即可） 成功！ 总结：我是通过js脚本获取网页元...
jq实现checkbox全选全不选
05-23
你可以使用以下的代码来实现checkbox全选/全不选的功能： ```javascript // 全选/全不选 $('#all').click(function() { $('input[name="checkbox"]').prop('checked', this.checked); }); // 单个checkbox点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值