jQuery checkbox 选中事件小案例.

最新推荐文章于 2025-05-28 11:39:43 发布

weak1003

最新推荐文章于 2025-05-28 11:39:43 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weak1003/article/details/116325601

本文介绍了如何使用jQuery实现复选框的勾选和取消勾选功能。通过添加点击事件到button，然后遍历并操作input标签的checked属性，达到选中或取消选中的效果。此外，还展示了利用for循环实现复选框的反选操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能是jQuert复选框的一个勾选效果。
先创建视图写出大概布局
并且引入jQuery插件。
再对其添加stylr样式如下
呈现样式如下
先给button添加一个点击事件。
然后通过for循环遍历所有的input标签
再通过checked(属性可设置或返回某个单选按钮是否被选中。)
从而设置为true 便可实现勾选的效果。

 $("#btn1").click(function () {
                they1 = $("input");
                for (var i = 0; i <they1. length; i++) {
                    they1[i].checked = true;
                }
            })

再通过checked(属性可设置或返回某个单选按钮是否被选中。)
从而设置为true 便可实现取消勾选的效果。

   $("#btn2").click(function () {
                they2 = $("input");
                for (var i = 0; i <they2. length; i++) {
                    they2[i].checked = false;
                }
            })

for 循环遍历所有input标签而后进行判断文本是否勾选从而在进行反选操作（业余）

  $("#btn3").click(function () {
                they3 = $("input");
                for (var i = 0; i <they3. length; i++) {
                    if (they3[i].checked==true) {
                        they3[i].checked = false;
                    } else {
                        they3[i].checked = true;
                    }
               }
            })