带有隐藏输入的自定义复选框未正确选择。 Javascript 需要调整答案

【问题标题】：Custom checkbox with hidden inputs not selecting properly. Javascript needs adjusting带有隐藏输入的自定义复选框未正确选择。 Javascript 需要调整
【发布时间】：2013-09-16 18:16:16
【问题描述】：

我正在使用 input 隐藏在 span 中的自定义复选框；我编写了一个脚本来为checked 添加类，但它实际上并没有将输入标记为已检查。我在这里做错了什么？

更新：现在复选框检查！万岁。一个新问题是隐藏复选框上的可见性，在复选框区域选中时也会隐藏新类...如果单击标签，则复选框显示为选中，但如果单击复选框图像本身，没有任何变化...

HTML

<fieldset>
  <label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label>

  <span class="open-checkbox">
     <input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" />
  </span>
</fieldset>

CSS

.open-checkbox {
    background-position: -4px -48px;
    background-image: url(../images/adcolor-sprite.png);
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: right;
    height: 25px;
    margin-top: 10px;
    width: 25px;
}

.checked {
    background-position: -4px -12px;
    background-image: url(../images/adcolor-sprite.png);
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: right;
    height: 25px;
    margin-top: 10px;
    width: 25px;
}

input[type=checkbox] {
    visibility: hidden;
}

#key-areas-inputs label.sublabel {
    display: block;
    float: left;
    height: 44px;
    padding: 0 0 0 10px;
    width: 300px;
}
#key-areas-inputs input.key-areas-checkbox {
    float: right;
    display: block;
    clear: none;
    height: 22px;
    width: 22px;
    margin-top: 18px;
    margin-right: 4px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#key-areas-label {
    font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #df007c;
    display: block;
    clear: left;
    float: left;
    width: 348px;
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-align: right;
}

// check checked boxes on load     
    $(".key-areas-checkbox:checked").each(function(){
        $(this).next().addClass('checked');
    });

    // add class and checked attribute to filter inputs
    $('.open-checkbox').click(function () {
        console.log('click');
        var $this = $(this);
        var $input = $this.find('input');

        $this.toggleClass('checked', $input.is(':checked'));
        return;

        if($input.prop('checked')){
            $this.removeClass('checked');
        } else {
            $this.addClass('checked');
        }
    });

【问题讨论】：

你能给我们提供一个jsfiddle

标签： javascript css checkbox

【解决方案1】：

勾选复选框添加：

 $input.attr('checked','checked');

取消选中：

$input.removeAttr('checked');

【讨论】：

【解决方案2】：

您的 for 和 id 不匹配。将您的 id 更改为“checkbox-insights-and-planning”（缺少一个“s”），它应该可以工作。

还要确保您的图像路径是正确的（我们无法使用您的示例代码对其进行测试，因为它是相对路径；我只是尝试使用背景颜色并且它有效）。

【讨论】：

这很有帮助；但是，使用 {visibility:hidden;} 隐藏复选框也会隐藏图像交换...

【解决方案3】：

我发现了问题所在。 JS很好。解决方法是将inputs 嵌套在label 内部，并包裹在div. 内部，这样就达到了预期的效果。

【讨论】：