使用Jquery实现Checkbox全选功能

最新推荐文章于 2021-03-10 19:26:35 发布

转载最新推荐文章于 2021-03-10 19:26:35 发布 · 362 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=2ib12c2ib&title=%E4%BD%BF%E7%94%A8Jquery%E5%AE%9E%E7%8E%B0Checkbox%E5%85%A8%E9%80%89%E5%8A%9F%E8%83%BD

文章标签：

#jQuery

前端专栏收录该内容

493 篇文章

订阅专栏

本文详细介绍了如何使用jQuery实现页面元素的全选功能。通过监听全选复选框的点击事件，可以一键选择或取消选择所有相关复选框，提高了网页操作的便捷性和用户体验。

使用jQuery 实现全选非常简单，下边我们就看看如何实现jQuery 全选。假设在页面中有如下标签：

全选<input id="all" type="checkbox" value="" />
投资<input id="Checkbox1" type="checkbox" name="test" value="投资" />
理财<input id="Checkbox2" type="checkbox" name="test" value="理财" />
担当<input id="Checkbox3" type="checkbox" name="test" value="担当" />
成熟<input id="Checkbox4" type="checkbox" name="test" value="成熟" />

jQuery 实现全选的代码如下：

//点击全选框
jQuery("#all").click(function() {
    if (jQuery(this).attr("checked") == true) {
        //如果是全选,根据name遍历单选框，并全部选中;否则全部取消选中。
        jQuery("input[name='test']").each(function() {
            jQuery(this).attr("checked", true);
        });
    }
    else {
        jQuery("input[name='test']").each(function() {
            jQuery(this).attr("checked", false);
        });
    }
});

这样我们实现了jQuery 全选。