Question

我使用以下代码使用自定义UI作为复选框：

<div class="checkboxWrapper">
  <input type="checkbox" class="receipt" name="receipt" id="receipt" />
</div>

CSS：

.checkboxWrapper {
    display: inline-block;
}

/* This is the invisible checkbox */
.checkboxWrapper input[type="checkbox"] {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 120;
    opacity: 0;
}

/* This is a div simulating a checkbox */
.checkboxWrapper:after {
    content: ' ';
    display: block;
    position: relative;
    top: 2px;
    left: 3px;
    z-index: 100;
    //margin: 16px 0 0 16px;
    height: 16px;
    width: 16px;
    overflow: hidden;
    background-image: url(../images/checked.png);
    background-position: 0 0;
}

然后在选中复选框时尝试更改背景图像位置：

input[type="checkbox"]:checked .checkboxWrapper:after {
    background-position: 16px 0;
    background-color: indianred;
}

有可能吗？这是小提琴：http://jsfiddle.net/LbSpX/

Answer 1

在css中，如果结构是这样，你可以从标签中绘制自定义复选框：

<input type="checbox" id="ckb" /> <label for="ckb">label</label> Css可以是

input + label { /* style */}
input:checked + label {/* other style }
/* or and with before/after */
input + label:before { /* style */}
input:checked + label:before {/* other style }

使用无线电和绘制的checbox的示例：http://codepen.io/anon/pen/vhgqj/

示例过滤器使用avanced selecteur来隐藏和绘制输入

Answer 2

继上面的评论之后，这里有可以为您完成此任务的jQuery代码：

<强> CSS

.checkboxWrapper.checked:after {
    background-position: 16px 0;
}

<强> JS

$('input#receipt').on('change', function() {
    if ($(this).is(':checked')) {
        $(this).parent().addClass('checked');
    } else {
        $(this).parent().removeClass('checked');
    }
})

在JSFiddle上查看：http://jsfiddle.net/LbSpX/2/

如何更改复选框上的父div：已选中？

2 个答案: