jq js判断多选框是否被选中纯 css实现改变多选框样式

最新推荐文章于 2024-06-10 21:55:44 发布

原创最新推荐文章于 2024-06-10 21:55:44 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用jQuery的.prop()和.is()方法检查多选框是否被选中，并展示了通过CSS改变选中状态下的多选框样式。提供的示例代码包括了选中状态的背景颜色改变、边框样式调整以及添加旋转效果，适用于前端开发者快速应用。

jq js判断多选框是否被选中

$("#test1").prop("checked")和$("#test1").is(":checked")

然后下面附上简单的css改变多选框样式的代码复制就能用

.checkbox:checked {
            background:#3ea2ee;
        }
        .checkbox {
            -webkit-appearance:none;
            -moz-appearance:none;
            outline: none;
            width:20px;
            height:20px;
            background-color:#ffffff;
            border:solid 1px #dddddd;
            //是圆形还是方块
            /* border-radius:50%; */
            margin:0;
            padding:0;
            position:relative;
            display:inline-block;
            /*文字对齐方式*/
            vertical-align:top;
            transition:background-color ease 0.1s;
        }
        .checkbox:checked::after {
            content:'';
            top:3px;
            left:3px;
            position:absolute;
            border:#fff solid 2px;
            border-top:none;
            border-right:none;
            height:6px;
            width:10px;
            transform:rotate(-45deg);
        }