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

叁歲伎倆 2022-06-03 04:49 231阅读 0赞

//本例子中要注意.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>

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现checkbox的反选,全选，全不选.

HTML 页面结构 <div> <input name="chkItem" type="checkbox" value="今日话题"/> 今日

本是古典何须时尚/ 2024年02月17日 18:16/ 0 赞/ 60 阅读

相关 jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选

前端页面html <tr v-for="(log,index) in logList">

川长思鸟来/ 2022年11月08日 14:28/ 0 赞/ 253 阅读

相关 jQuery实现的Checkbox“全选/全不选”

自己实现的checkbox的“全选/全不选”，只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可 / 全选/全不

- 日理万妓/ 2022年08月11日 03:22/ 0 赞/ 261 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 317 阅读

相关 jQuery实现CheckBox全选、全不选

`<!DOCTYPE html PUBLIC` `"-//W3C//DTD XHTML 1.0 Transitional//EN"` `"http://www.w3.org/T

悠悠/ 2022年06月14日 12:16/ 0 赞/ 241 阅读

相关 jQuery实现CheckBox全选、全不选

<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id=

喜欢ヅ旅行/ 2022年06月12日 00:17/ 0 赞/ 263 阅读

相关 jquery checkbox全选/反选

使用jquery全选和反选多选框 $('.ck').each(function(){ if($(this).is(':checked')){

青旅半醒/ 2022年06月10日 08:13/ 0 赞/ 298 阅读

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

//本例子中要注意.prop和attr的区别: .prop:获取原生属性时使用 .attr:获取自己添加的属性使用 <head> <script src=

叁歲伎倆/ 2022年06月03日 04:49/ 0 赞/ 232 阅读

相关使用jQuery完成复选框的全选和全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

港控/mmm°/ 2022年04月21日 22:56/ 0 赞/ 241 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 586 阅读