使用 preventDefault() 时不会选择表单单选/复选框输入答案

【问题标题】：Form radio/checkbox inputs wont select when using preventDefault()使用 preventDefault() 时不会选择表单单选/复选框输入
【发布时间】：2014-07-28 19:37:06
【问题描述】：

当像这样单击 input[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 不再启动。

关于如何排除故障的任何想法？

【问题讨论】：

标签： jquery checkbox input toggle

【解决方案1】：

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

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

【讨论】：