使用jQuery实现带隐藏输入框的自定义复选框选中/取消功能

我最近做了个自定义样式的复选框需求，用隐藏输入框来存储选中状态，分享给大家参考：

HTML结构 #

用.my-checkbox容器包裹标签和隐藏输入框，隐藏输入框默认值设为0（代表未选中状态）：

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

jQuery交互逻辑 #

给容器绑定点击事件，通过判断隐藏输入框的当前值来切换状态：

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

功能说明 #

• 首次点击.my-checkbox容器时，隐藏输入框的值会改为1（标记为已选中），同时给容器加上active类，你可以通过这个类来编写选中状态的样式（比如添加勾选图标、改变背景色等）
• 再次点击时，隐藏输入框的值恢复为0，并移除active类，回到未选中状态

这种方案既实现了自定义样式的复选框，又能通过隐藏输入框把选中状态提交到后台，刚好适配表单提交的需求~

内容的提问来源于stack exchange，提问作者kodfire