Question

我有一个输入和一个复选框，如下所示：

html：

<input class="form-control input_box" id="passwordRegister" name="password" type="text">

<div class="aweCheckbox aweCheckbox-primary">
    <input id="showPasswordRegister" type="checkbox">
    <label class="labelShowPasswordRegister input_title" for="showPasswordRegister">
    ::before
    Show password
    ::after
    </label>
</div>

我可以在标签之前设置:::样式：

css：

.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #337ab7;
  border-color: #337ab7;
}

一切正常。但是如果我向元素添加（event）函数

js：

function showPasswordRegister() {
    var x = document.getElementById("passwordRegister");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}   

$(".labelShowPasswordRegister").on('click',function(event){
    event.preventDefault();
    event.stopPropagation();
    showPasswordRegister();
});

...，然后在控制台中看到：

<div class="aweCheckbox aweCheckbox-primary">
    <input id="showPasswordRegister" type="checkbox">
    <label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
    ::before
    Show password
    ::after
    </label>
</div>

...标签的样式无效。我想念什么？

Answer 1

不要在处理函数中使用event.preventDefault()。当您单击标签时，这将阻止默认操作触发对相应复选框的单击。 CSS与:checked伪类匹配，但是在执行此操作时并未选中该框。

如果您单击复选框本身而不是标签，则CSS应该仍然可以工作。

CSS-如果元素用于事件功能，则无法在CSS中调用元素

1 个答案: