jquery - 选中/取消选中带有隐藏输入的自定义复选框

Question

我在 HTML

中有这个

<div class="my-checkbox">
    <label>I do agree</label>
    <input type="hidden" name="agreement" value="0">
</div>

这在 jQuery

中

$('.my-checkbox').on('click', function()
{
    if($(this).children('[type="hidden"]').val() == 0)
    {
        $(this).children('[type="hidden"]').val(1);
        $(this).addClass('active');
    }
    else
    {
        $(this).children('[type="hidden"]').val(0);
        $(this).removeClass('active');
    }
});

当我单击.my-checkbox 时，它会将值更改为1 并添加类active，当我再次单击它时，反之亦然。它可以正常工作，但是在移动设备中，当我单击它时它会更改值并设置为 active 但是当我再次单击它时，它会更改值但 active 类不会删除。我怎么知道？只需双击并提交表单，结果是 => 您应该同意协议。

谢谢

Answer 1

当它是一个简单的 CSS 来更改样式以使其以相同的方式工作时，重新发明复选框是没有意义的。没有添加/删除类。无需 JavaScript，只需一个简单的 CSS 选择器。

#agree + label {
   color: red
}

#agree:checked + label {
   color: green
}

<div class="my-checkbox">
    <input type="checkbox" id="agree" name="agreement" hidden>
    <label for="agree" >I do agree</label>
</div>

---

现在为什么你的代码不起作用？

if($(this).children('[type="hidden"]').val() == 0)  <-- If zero
{
    $(this).children('[type="hidden"]').val(0);  <-- set zero

您没有切换到 1。您的逻辑颠倒了。