Question

在this JSfiddle中我有一个复选框，一个标签和一个提交按钮。

选中复选框后，点击提交时会出现'x'，就像现在一样。

如果取消选中此复选框，则点击提交时，“x”应该会消失，就像现在一样。

问题是，如果选中复选框，则会再次显示“x”，并单击“提交”。

这是我的代码

$('form').submit(function() {
    if( $("input[type=checkbox]").is(':checked')){
        $("label").add();
    }else{   
        $("label").detach();
    }        
    return false;
});


<form action="" method="post">
<input id="element" signed" type="checkbox" checked>
<label for="element">x</label>
<button type="submit">Submit</button>
</form>

知道什么是错的吗？

Answer 1

好吧，如果你使用show()和hide()而不是add()和detach()，那就可以了。

但我不确定这种方法能解决你想要实现的目标。

Answer 2

当您detach标签时，它不再位于DOM中，因此$('label')不再有效。你必须将节点存储在某个地方，而不是在DOM中。

同样add不是将节点添加到DOM中的正确功能。

var $label = $("label");
$('form').submit(function() {
    if( $("input[type=checkbox]").is(':checked')){
        $("input[type=checkbox]").after($label);
    }
    else {   
        $label.detach();
    }        
    return false;
});

Here's a live example.

Answer 3

由于您没有添加已分离的元素，x不会再次出现，您尝试添加没有文字的新元素。

$("label").add();

查看add的正确用法。

此外，您正在分离而不保存引用以将其附加回来。见an example of detach on jQuery docs

Answer 4

分离后，标签不再是DOM的一部分，因此您无法再使用$('label')选择它，add()也不会按照您的想法执行，您可能正在寻找{{ 3}}？

after()

xLabel = $("label");
$('form').submit(function() {
    if( $("input[type=checkbox]").is(':checked')){
        $("#element").after(xLabel);
    }else{   
        $("label").detach();
    }        
    return false;
});

想要添加元素。怎么了？

4 个答案: