如何在checkbox选中时通过AJAX发送值1，未选中时发送值0？

问题根源 #

• #hidden_onoff是<label>标签，本身没有val()方法，你给它赋值、取值的操作全部无效
• 同时绑定了click和change两个事件处理checkbox状态，逻辑冗余
• AJAX请求是页面加载时直接触发，没有和checkbox状态变化、表单提交的动作绑定，拿不到最新的状态值
• 缺少专门存储开关数值的载体，用label存值本身不符合规范

修复方案 #

第一步：修改HTML结构，添加隐藏input专门存数值 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="on_off">
  <div class="container">
    <div class="form-check form-check-inline">
      <input id="onoff" type="checkbox" checked="checked" />
      <label class="checkbox-inline" id="onoff_text">ON</label>
      <!-- 新增隐藏input存开关值 -->
      <input type="hidden" id="hidden_onoff" value="1">
    </div>
  </div>
</form>

第二步：修改JS逻辑，合并事件、绑定触发时机 #

// 合并成一个change事件处理状态更新
$("#onoff").change(function() {
  const isChecked = $(this).is(':checked');
  // 更新显示文本
  $("#onoff_text").text(isChecked ? "ON" : "OFF");
  // 更新隐藏域的值
  $("#hidden_onoff").val(isChecked ? "1" : "0");
  
  // 状态变化时自动提交AJAX，如果是要表单提交时触发就把这段放到表单submit事件回调里
  $.ajax({
    url: "/on_off",
    method: "POST",
    data: {
      onoff: $("#hidden_onoff").val(),
    },
    success: function(data) {
      // 处理返回结果
    }
  });
});

简化方案（不需要隐藏域的写法） #

如果不想加额外的隐藏域，提交时直接读取checkbox的checked属性判断值即可，代码更精简：

$("#onoff").change(function() {
  const isChecked = $(this).is(':checked');
  $("#onoff_text").text(isChecked ? "ON" : "OFF");
  
  $.ajax({
    url: "/on_off",
    method: "POST",
    data: {
      onoff: isChecked ? "1" : "0",
    },
    success: function(data) {}
  });
});

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