jquery 完成checkBox完成全选\全不选\反选的功能

最新推荐文章于 2021-07-16 20:27:39 发布
最新推荐文章于 2021-07-16 20:27:39 发布
阅读量254 收藏
点赞数
分类专栏： JQuery基础 文章标签： web jquery checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdc8596/article/details/78837959
版权

//本例子中要注意.prop和attr的区别:

.prop:获取原生属性时使用

.attr:获取自己添加的属性使用

<head>

    <script src="Scripts/jquery-3.1.1.js"></script>
    <meta charset="utf-8" />
    <script>
        $(function () {
           // $('*').attr('banjimingcheng', '.netheuma3');
            //全选
            $('#btnChkAll').click(function () {
                $('input[type=checkbox]').attr('checked', true);
            })
            //全不选
            $('#btnNoneChk').click(function () {
                $('input[type=checkbox]').attr('checked', false);
            })
            //反选
            $('#btnChkReverse').click(function () {
                //第一种写法
                //$.each($('input[type=checkbox]'), function (k, v) {
                //    $(v).prop('checked', !$(v).attr('checked'));
                //})
                //第二种写法
                $('input[type=checkbox]').prop('checked', function (index, attr_val) {
                    return !attr_val;
                });

                //当要获取一个js dom对象的原生属性时,要是用prop()来获取,或者设定
            });
        })
    </script>
    <title></title>
</head>
<body>
    <input type="button" name="name" value="全选" id="btnChkAll" />
    <input type="button" name="name" value="全不选" id="btnNoneChk" />
    <input type="button" name="name" value="反选" id="btnChkReverse" />
    <input type="checkbox" name="name" value="" id="chkBox1" />
    <input type="checkbox" name="name" value="" id="chkBox2" />
    <input type="checkbox" name="name" value="" id="chkBox3" />
    <input type="checkbox" name="name" value="" id="chkBox4" />
    <input type="checkbox" name="name" value="" id="chkBox5" />
    <p>
        ppppppppppp
    </p>
    <div>
        divdvi
    </div>
</body>
奇点码农
关注
专栏目录
jQuery实现checkbox的全选反选方法
我的博客
01-30 489
checkbox的全选、取消全选、选中所有奇数、选中所有偶数等方法的实现代码如下： 注意jQuery的版本：jQuery1.6增加了prop，1.6之前的还是使用attr()和removeAttr()
jQuery的checkbox，全选反选以及显示值功能
博客
04-23 237
对checkbox操作时用prop而非attr。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> </head> ...
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
全选、全不选和反选
hljncxjh的专栏
07-29 441
  网页特效代码|ffasp.com|---复选框全选、全不选和反选的效果实现function checkAll() {for (var j = 1; j box = eval("document.checkboxform.C" + j); if (box.checked == false) box.checked = true;   }}function uncheckAll() {
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
jQuery实现全选全不选反选
qq_39845198的博客
03-06 699
<head> <meta charset="UTF-8"> <title>全选全不选反选</title> <script type="text/javascript" src="../jquery-1.7.2.js"></script> <script type="text/javascript"> `` ```javascript $(function () { //全选
jQuery对于全选，全不选，反选的实现
chensuohu3920的博客
07-28 99
网页效果图如下： 可以点击按钮实现相对应的效果 html代码如下： javascript代码如下： 这个效果主要是运用到prop属性及removeProp属性 编写的思路如下： 1，分别给三个按钮添加点击事件 2，利用checkbox以及checked的属性进行判断操...
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
### jQuery实现全选全不选反选功能 文档中提供的jQuery代码实现了以下功能： #### 全选/全不选 全选/全不选功能是通过点击一个复选框或者一个按钮来控制一组复选框的选中状态。 ```javascript $("#all").click...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
jQuery实现checkbox列表的全选、反选功能
11-26
本篇文章将详细探讨如何使用jQuery实现复选框列表的全选和反选功能，特别是如何通过自定义属性实现高效的封装。 首先，我们需要了解jQuery中的`:checkbox`选择器，它是用来选取所有复选框元素的。在给定的示例代码...
jQuery 实现全选、全不选、反选 功能
VirgoYellow 的专栏
08-30 309
方法：使用 prop() 来设置 "checked" 属性的值，true 为选中，false 为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont...
jQuery实现全选全不选和反选
hyb0852的专栏
04-01 411
表单的全选和反选 $(function(){     $("#checkAll").click(function(){     $(":checkbox").attr("checked",true); });     $("#checkNo").click(function(){     $(":checkbox").attr("checked",false); });
利用jQuery轻松实现全选/全不选,全选,全不选,反选按钮功能
Llaqwer的博客
09-06 1301
上篇写到利用js实现该功能,这次利用jQuery可以更简单的实现该功能 在项目里需要添加jquery.js如图: 网页中body代码 &lt;body&gt; 您的爱好很广泛!!! &lt;br&gt; &lt;input type="checkbox" name="chekcItems" value="全选/全不选" id="select"/&g
jQuery实现全选、全不选、反选
陈嘉欣的技术编程博客
06-28 307
HTML代码&lt;body&gt; &lt;table style="width: 100%;"&gt; &lt;tr&gt; &lt;td&gt; &lt;input id="cbx1" type="checkbox" name="all" /&gt;归去来&
通过jquery实现全选、全不选、反选功能
fq_fly的博客
11-29 357
通过jquery实现全选功能 点击全选/全不选，若子选项都未选择，则子选项全部选择；若子选项都选择，则子选项全部取消选择； 在全部选择情况下，若点击子选项取消选择，则全选/全不选取消选择； 在部分选择和另一部分未选择情况下，点击反选，则前一部分取消选择，后一部分选择 <!DOCTYPE html> <html> <head> <meta cha...
使用Jquery实现全选、全不选、反选功能
qqyang_的博客
07-16 856
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
jquery全选/全不选/反选的实现代码(适合入门)
toplover2的linux学习博客
04-07 130
jquery另一种全选、全不选、反选的方式(与原生js混合使用)。 [code="java"] $(document).ready(function(){ $("#selectAll").click(function(){ //这里也可以直接用this,原生js语句 if($(this)[0].checked){ $('[name=items]:checkbox')...
jQuery实现全选、全不选以及反选操作
m0_37601917的博客
12-12 1115
在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false，操作很方便，很完美没有bug。 　　学了jquery后单独实现下全选、全不选、反选...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值