如何实现多个checkbox未选中时提交传递0值？

问题根源 #

你的代码存在三个核心问题：

• 闭包陷阱：循环中绑定点击事件时，check和hidden变量会在循环结束后统一指向最后一组元素，导致所有Checkbox点击都只会操作最后一个hidden输入框。
• 未定义变量：console.log('ck: ', ck);中的ck未声明，会触发JS报错阻塞后续逻辑。
• DOM结构不完整：所有<label>标签未闭合，可能导致事件绑定失效或样式异常。

修复方案 #

步骤1：修正HTML结构 #

先补全未闭合的<label>标签，确保DOM结构合法：

<div class="col-4">
  <label class="switch switch-lg">
    <input type="checkbox" name="order[1]" id="order-1">
    <input type="hidden" id="hd-check-1" name="order[1]" value="0">
  </label>
</div>

<div class="col-4">
  <label class="switch switch-lg">
    <input type="checkbox" name="order[2]" id="order-2">
    <input type="hidden" id="hd-check-2" name="order[2]" value="0">
  </label>
</div>

<div class="col-4">
  <label class="switch switch-lg">
    <input type="checkbox" name="order[3]" id="order-3">
    <input type="hidden" id="hd-check-3" name="order[3]" value="0">
  </label>
</div>

步骤2：修复JS逻辑（两种可选写法） #

写法一：解决闭包问题的循环绑定

通过let声明循环变量解决闭包问题，确保每个事件绑定对应正确的元素：

$(document).ready(function() {
  var count = 3;
  
  for (let i = 1; i <= count; i++) {
    var check = $('#order-' + i);
    var hidden = $('#hd-check-' + i);
    
    // 初始化默认选中状态
    if (check.prop("checked")) {
      check.val(1);
      hidden.prop('disabled', true);
    }
    
    check.on('click', function() {
      if ($(this).prop("checked")) {
        $(this).val(1);
        hidden.prop('disabled', true);
      } else {
        hidden.prop('disabled', false);
      }
    });
  }
})

写法二：更灵活的DOM关系匹配（推荐）

不需要硬编码数量，通过Checkbox与hidden的兄弟关系自动匹配，扩展性更强：

$(document).ready(function() {
  // 绑定所有order前缀的Checkbox点击事件
  $('input[id^="order-"]').on('click', function() {
    const $hidden = $(this).next('input[type="hidden"]');
    if ($(this).prop("checked")) {
      $(this).val(1);
      $hidden.prop('disabled', true);
    } else {
      $hidden.prop('disabled', false);
    }
  });

  // 初始化处理页面加载时已选中的Checkbox
  $('input[id^="order-"]:checked').each(function() {
    $(this).val(1);
    $(this).next('input[type="hidden"]').prop('disabled', true);
  });
})

原理说明 #

• 当Checkbox被选中时，禁用对应的hidden输入框，表单提交时只会发送Checkbox的1值；
• 当Checkbox未被选中时，启用hidden输入框，表单提交时会发送hidden的0值；
• 这样后台就能收到每个order[n]的对应值，无论Checkbox是否被选中。

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