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类不会删除。我怎么知道的？只需双击并提交表单，结果就是=＆gt;你应该同意协议。

由于

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.你的逻辑被逆转了。

jquery - 使用隐藏输入选中/取消选中自定义复选框

1 个答案: