jq 表单全选

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);
            });
        }
    })