正文

checkbox的全选与全不选

大厨的笔记  大厨的笔记  2022-08-08  548

关键词：

checkbox 的全选与全不选

只需要调用 cekAll.check();方法，这个方法接收两个参数：

参数一: 全选按钮的 id 以字符串的形式写
参数二: 其他 checkbox 的 name 值也是以字符串的形式写

使用很简单 : 复制 js 代码到你的 js 文件的任何地方，只需要在HTML文档加载完以后调用 cekAll.check();传入参数即可什么点击事件，什么获取对象，统统不用写，

装点：不管你的 checkbox 是写到页面上的还是动态读取的，都不需要加事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var cekAll = {
        ‘num‘:0,
        check:function(part,chid){
            var parent = document.getElementById(part);
            var child = document.getElementsByName(chid);
            parent.onclick = function(){
                if(parent.checked != true){
                    for(var j = 0;j<child.length;j++){
                        child[j].checked = false;
                        cekAll.num = 0;
                    };
                }else{
                    for(var i=0;i< child.length;i++){
                        if(parent.checked == true){
                            child[i].checked = true;
                            cekAll.num = child.length;
                        };
                    };
                };
            };
            cekAll.childClick(part,chid);
        },
        childClick:function(one,two){
            var one1 = document.getElementById(one);
            var two1 = document.getElementsByName(two);
            for(var j = 0;j< two1.length;j++){
                two1[j].onclick = (function(){
                    return function(){
                            if(this.checked == false){
                                one1.checked = false;
                                cekAll.num--;
                            }else{
                                cekAll.num ++;
                                if(cekAll.num == two1.length){
                                    one1.checked = true;
                                };
                            };
                        };
                })();
            };
        }
    };
    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="quanxuan"/>全选<br/>
    </div>
<script>
    // 动态添加的 checkbox 跟写到页面上是一样的
    var div = document.getElementsByTagName(‘div‘)[0];
    var arr = [‘吃饭‘,‘睡觉‘,‘打豆豆‘];
        for(i in arr){
            var str = ‘<input type="checkbox" name="che1">‘+arr[i]+‘‘;
            div.innerHTML += str;
        }
    // -- 静态写到页面上的、动态添加的，调用 cekAll.check(); 方法的书写格式都一样
    cekAll.check(‘quanxuan‘,‘che1‘);
    </script>
</body>
</html>

jquery控制checkbox全选与全不选

$("#medicineCheck").change(function(){varisChecked=$("#medicineCheck").is(‘:checked‘);//获取所有checkbox组成的数组varcheckedArrs=$("input[name=‘medicineCheckBox‘]");//判断是全选还是反选if(isChecked){checkedArrs.each(fu 查看详情

全选与全不选

<inputtype="checkbox"id="a"value=""/>全选 <inputtype="checkbox"class="b"value="1"/>1 <inputtype="checkbox"class="b"value="2"/>2 <inputtype="checkbox"class="b"value="3"/>3 < 查看详情

案例：全选与全不选及反选(代码片段)

效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.html结构代码:<inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkbox"><inputclass=‘check‘type="checkb 查看详情

关于checkbox全选与全不选遇到的问题

HTML:　　<divclass="outbox">　　　　<labelfor="box">全选</label>　　　　<inputtype="checkbox"id="box"/>　　</div>　　<divclass="outbox2">　　　　<labelfor="box1">选项1</label> 查看详情

jquery实现复选框的全选与全不选

对于复选框的选中checked属性，实在是无力吐槽。从上图可以看出，当复选框不设置checked属性时，默认没有被选中；其它三种情况，设置checked属性但不设置属性值即置空，或者将checked属性值设为true/false，都是默认被选中。我们... 查看详情

js——全选与全不选

1、每个子input标签都需要进行判断2、使用开闭原则，一旦满足条件就改变默认值3、在给主input标签注册事件时，要求主input标签的checked值赋值给子标签<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></tit... 查看详情

jquery实现复选框全选与全不选

...属性即可设置全选了，prop是jq自带的一个方法。5、因为CheckBox可以设置checked属性，所以我们把它设置为true即可。6、最后预览，可以看到CheckBox都被checked中了，这样就达到全选了。参考技术A1、创建一个html，然后在body标签添加... 查看详情

jquerycheckbox的全选和全不选

刚学Jquery，在做checkbox的全选全不选时遇到了一个问题，使用attr()方法的话，只能成功全选和取消全选一次，第二次就不行了，如下面$("#chkAll").click(function(){if(this.checked==true){$("#tabinput[type=‘checkbox‘]").attr("checked",true);}else{$("#tabi... 查看详情

js实现checkbox的全选和全不选功能

html代码：<formname="form1"method="post"action="manage.php?act=sub"><inputtype="checkbox"name="mm[]"value="<?=$row[‘0‘]?>"onClick="checkAll(this,‘mm‘)">< 查看详情

checkbox的全选，全不选，反选功能(代码片段)

1<!doctypehtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6</head>7<script>8window.onload=function()9letbtns=document.getElementsByTagName(‘button‘);10letinputs=document.getElementById(‘bottom‘).getElementsByTagName(... 查看详情

jquery复选框的全选全不选及选择所有复选框实现全选的复选框

Jquery代码$(function()$(":checkbox.parentfunc").click(function()//如何获取被点击的那个复选框$(this).parent().parent().next().find(":checkbox").prop("checked",this.checked););$(":checkbox:not(.parentfunc)").click( 查看详情

jqury简易实现checkbox反选与全选

...类似的功能，只是一下子就懵逼了，简而言之还是自己对checkbox的反选与全选没有掌握十足，所以再利用一些时间重复巩固了这个小功能，代码不长，想到了就简单，没想到就折腾好久。就自己遇到一些坑，关于checkbox细谈一二... 查看详情

checkbox实现全选全不选

1.jQuery实现checkbox全选全不选<!DOCTYPEhtml><headrunat="server"><title>jQuery实现CheckBox全选、全不选</title><metacharset="utf-8"><scriptsrc="jquery-3.1.1.min.js"></script>& 查看详情

html,javascript中怎么控制复选框checkbox的全选，全不选，以及全选中，全选按钮选中，其中一个或者多个没选，则全选按钮不被选中

<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@includefile="/commons/jsp/htmtag.jsp"%> <html><head> <metahtt 查看详情

复选框的全选反选全不选

//全选$("#btn1").click(function(){$("input[name=‘FORM_COLUMNS‘]").prop("checked",true);});//取消全选$("#btn2").click(function(){$("input[name=‘FORM_COLUMNS‘]").prop("checked",false);});//反选$("#btn3").click( 查看详情

多选框的全选和全不选(复制)

jQuery实现的全选、反选和不选功能本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希... 查看详情

关于checkbox全选与反选的问题

在一组checkbox中常有这样的需求，选择全选按钮，所有的选项必须全选上，当再次点击时，则所有的按钮必须反选，当点击一组checkbox时，只有有一个不选上，则按钮不选中，当所有的按钮全部选上时，此时全选按钮就选上，具... 查看详情

购物车的全选，全不选，局部全选，全选判定

<!doctypehtml><html><head><metacharset="utf-8"><metaname="format-detection"content="telephone=no"/><metaname="viewport"content="user-scalable=no,width=device-width,ini 查看详情