jq 表单全选

最新推荐文章于 2022-08-31 20:38:29 发布

初凉了夏

最新推荐文章于 2022-08-31 20:38:29 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： js/jq 文章标签： js jq

本文链接：https://blog.youkuaiyun.com/hyc22966/article/details/88812310

js/jq 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用jq实现的全选功能。通过监听全选按钮的点击事件，可以为一组复选框添加或移除选中状态。具体实现是利用jQuery的选择器获取到目标元素，并通过判断全选按钮的状态来决定是否为子项添加checked属性。

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

jq 表单项全选

使用":checked"判定选中状态，操作其他input选项添加“checked”。

情景描述：

现有两个同级div容器，第一个div（类名：.control-label）中有一个“全选”按钮（input），第二个div中有一组input选项；当“全选”按钮被点击时，给第二个div中的所有input添加选中状态：checked。

    // 全选
    $(document).on("click",".control-label input",function(){
        console.log("click");
        // 取 全部选项
        var childInput = $(this).parents(".control-label").next().find("input");
        // 判断是全选 还是取消全选
        if($(this).is(':checked')){
            childInput.each(function(){
                //此处如果用attr，会出现第三次失效的情况
                $(this).prop("checked",true);
            });
        }else{
            childInput.each(function(){
            // 反之 全部移除checked
                $(this).removeAttr("checked",false);
            });
        }
    })