input复选框全选和取消全选及遇到的问题

左手的ㄟ右手 2022-05-30 04:27 428阅读 0赞

直接上代码

方法一：

//实现全选与反选
                $("#allAndNotAll").click(function () {
                    if ($(this).prop("checked")) {
                        $("input[name=checkitem]:checkbox").each(function () {
                            $(this).prop("checked", true);
                        });
                    } else {
                        $("input[name=checkitem]:checkbox").each(function () {
                            $(this).prop("checked", false);
                        });
                    }
                });

方法二：

$("#allAndNotAll").click(function () {
                    if ($("#allAndNotAll").prop('checked')) {
                        $("#allAndNotAll").prop("checked", true);
                        $("input[name=checkitem]:checkbox").prop("checked", true);
                    } else {
                        $("#allAndNotAll").prop("checked", false);
                        $("input[name=checkitem]:checkbox").prop("checked", false);
                    }
                });

当有一个取消选中，则取消全选：

//当其中不勾选某一个选项的时候,则去掉全选复选框
                $(":checkbox[name=checkitem]").click(function () {
                    $("#allAndNotAll").prop('checked',
                        $(":checkbox[name='checkitem']").length == $(":checkbox[name='checkitem']:checked").length);
                });

问题：当将所有的prop方法改为attr的时候，checkbox全选/全不选只有第一次点击的时候有效，后面点击全部无效

解决方法就是：直接使用prop方法，这是jQuery的一个bug。

发表评论取消回复

表情：

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

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

相关阅读

相关 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 阅读

相关 input checkbox 全选与取消全选

看书：<input type="checkbox" name="checkbox" value=1><br> 写字：<input type="checkbox" name=

喜欢ヅ旅行/ 2022年06月06日 09:47/ 0 赞/ 342 阅读

相关全选取消全选

这里用到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 阅读

相关 input复选框全选和取消全选及遇到的问题

直接上代码方法一： //实现全选与反选 $("allAndNotAll").click(function () {

左手的ㄟ右手/ 2022年05月30日 04:27/ 0 赞/ 429 阅读

相关 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 阅读