Question

我在输入[type =“checkbox]的周围div中添加了一个.selected类，当它被点击时：

<label class="checkbox-button">
    <input type="checkbox" name="" value="" id="">
    <div class="checkbox-button-span">
        <span class="checkbox-button-circle"></span>
        <span class="checkbox-button-label">Yes</span>
    </div>
</label>

<script>
$('.checkbox-button').on('click', function(e) {
  $(this).toggleClass('selected');
  e.preventDefault();
});</script>

该函数正在按预期将类添加到周围的div中，但是当使用preventDefault时 - 它不再启动对输入的单击。或者，如果我删除preventDefault - toggleClass不再启动。

有关如何进行问题排查的任何想法？

Answer 1

不使用click事件，而是尝试使用复选框本身的change事件来切换类。由于直接单击标签或复选框，这将导致代码运行，无论值是否发生变化。

$('.checkbox-button :checkbox').on('change', function (e) {
    $(this).parent().toggleClass('selected');
});

使用preventDefault（）时，表单收音机/复选框输入不会选择

1 个答案: