自定义兼容IE8的复选框

叁歲伎倆 2022-01-20 04:45 191阅读 0赞

最近写页面又用到了自定义单选框，复选框，之前也有写过，但是没有做记录，这一次又重新写，用了不短的时间，想想还是记录一下，留待后用。

**复选框**

HTML

<div class="custom-checkbox">
        <span onclick="$checkBox(this);"><i></i></span>
        <input type="checkbox">
        <label>有效信息</label>
    </div>
    复制代码

css

.custom-checkbox {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-left: 30px;
        font-size: 14px;
        color: #999999;
    }
    .custom-checkbox span {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-top: -8px;
        background-color: #fff;
        border: 1px solid #cccccc;
        cursor: pointer;
        z-index: 1;
    }
    .custom-checkbox.active span i {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        background-color: #64a5ff;
    }
    .custom-checkbox input[type=checkbox] {
        visibility: hidden;
        margin-right: 10px;
    }
    复制代码

js

function $checkBox(obj) {
        var oInput = $(obj).siblings("input");
        oInput.prop("checked", !oInput.prop("checked"));
        $(obj).parent().toggleClass("active");
    }
    复制代码

自我感觉还不错，定义了一个基本的方法，如果在使用的过程中还有另外的需求，还可以自己定义一个方法，然后在自定义方法中调用这个基本的方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 自定义复选框/单选框

插件地址：[https://ext.dcloud.net.cn/plugin?id=717][https_ext.dcloud.net.cn_plugin_id_717]...

旧城等待，/ 2024年04月17日 21:47/ 0 赞/ 61 阅读

相关微信小程序-自定义复选框

1，效果 ![20210122153302493.png][] ![20210122153814517.png][] 2，wxml <checkbox-gr

朱雀/ 2023年01月10日 01:26/ 0 赞/ 239 阅读

相关自定义复选框记住密码之类可以使用

自定义复选框记住密码之类可以使用最终样式： ![在这里插入图片描述][20210518135850778.png_pic_center] html部分

太过爱你忘了你带给我的痛/ 2022年10月20日 14:58/ 0 赞/ 94 阅读

相关 Vue中自定义列表复选框和全选框-案例

效果图 ![20210914144329626.gif][] 主要代码实现 <div class="isck" @click="btnCheck(ite

你的名字/ 2022年09月11日 07:29/ 0 赞/ 226 阅读

相关 CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的[CSS3][]自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不

柔情只为你懂/ 2022年08月07日 09:53/ 0 赞/ 185 阅读

相关 android listview中自定义适配器和复选框

下面的代码中报错了，代码如下 @Override p public View getView(final int position, final

超、凢脫俗/ 2022年08月06日 04:25/ 0 赞/ 167 阅读

相关复选框选中判断的兼容性处理

由于JQuery版本的不同,判断复选框的选中判断条件也不同：如下表 <table style="border-collapse:collapse; border-spacin

朱雀/ 2022年06月15日 12:14/ 0 赞/ 272 阅读

相关关于jsp页面checkbox复选框的默认样式的修改(自定义复选框样式)

checkbox复选框的默认样式太low，最近做的项目我选择了自定义样式，网上找了不少文章内容冗余，并且并不是都有效果，所以将自己过程整理出来，以备后用。只要在jsp页面和

客官°小女子只卖身不卖艺/ 2022年05月31日 09:00/ 0 赞/ 462 阅读

相关简单的自定义select 下拉框，兼容IE

IE浏览器下的select 实在是各种…… 不好看……，可是项目要求至少兼容IE11 ，为了长得好看些，只能手动去编辑一个类似 select 的存在了，测试过IE9 以上

男娘i/ 2022年05月19日 10:48/ 0 赞/ 245 阅读

相关自定义兼容IE8的复选框

最近写页面又用到了自定义单选框，复选框，之前也有写过，但是没有做记录，这一次又重新写，用了不短的时间，想想还是记录一下，留待后用。复选框 HTML <div c

叁歲伎倆/ 2022年01月20日 04:45/ 0 赞/ 192 阅读