jquery 复选框全选、取消全选、全选按钮在未全选状态不选

系统管理员 2022-06-02 04:27 339阅读 0赞

代码：

<input type="checkbox" name="chooseAll" οnclick="checkAll()">全选
    <input type="checkbox" name="chooseMe" value="1" οnchange="notCheckAll();">1
    <input type="checkbox" name="chooseMe" value="2" οnchange="notCheckAll();">2
    <input type="checkbox" name="chooseMe" value="3" checked="checked" οnchange="notCheckAll();">3
    <input type="checkbox" name="chooseMe" value="4" οnchange="notCheckAll();">4
    <input type="checkbox" name="chooseMe" value="5" οnchange="notCheckAll();">5
    <script>
    
        function notCheckAll() {
            var allLen = $("input[name='chooseMe']").length;  //获取全部复选框长度（除去全选的框）
            var len = $("input[name='chooseMe']:checked").length;  //获取选中的框的长度
            if (len < allLen) {   //如果选取的长度小于所有长度
                $("input[name='chooseAll']").attr("checked", false);   //则全选框不选
            } else {
                $("input[name='chooseAll']").attr("checked", true);  //否则全选框选中
            }
            console.log(allLen);
        }
    
        function checkAll(){   //全选
            if($("input[name='chooseAll']").attr("checked")){   //如果点击全选框
                $("input[name='chooseMe']").attr("checked", true);   //所有框都选中
            }else{
                $("input[name='chooseMe']").attr("checked", false);   //否则都不选
            }
        }
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery 复选框：全选和非全选

html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我会带着你远行/ 2023年06月15日 13:28/ 0 赞/ 24 阅读

相关 JavaScript（JS）网页--复选框全选和取消全选

JS网页–全选和取消全选 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

清疚/ 2022年12月22日 04:48/ 0 赞/ 186 阅读

相关全选取消全选

这里用到AngularJS四大特性之二----双向数据绑定注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和n

爱被打了一巴掌/ 2022年06月04日 07:55/ 0 赞/ 288 阅读

相关 jquery 复选框全选、取消全选、全选按钮在未全选状态不选

代码： <input type="checkbox" name="chooseAll" οnclick="checkAll()">全选 <input type

系统管理员/ 2022年06月02日 04:27/ 0 赞/ 340 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 431 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 298 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 345 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 488 阅读

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

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

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

相关 jQuery使复选框一键全选/全不选

<form> 　　你爱好的运动是? 　　<input type="checkbox" id="hxy"/>全选/不全选　　<br /> 　　<input ty

青旅半醒/ 2021年10月30日 05:32/ 0 赞/ 451 阅读