无法通过ajax提交捕获复选框的值答案

【问题标题】：Not able to capture the value of checkbox through ajax submission无法通过ajax提交捕获复选框的值
【发布时间】：2018-09-04 03:37:12
【问题描述】：

我有一个表单，我希望通过该表单捕获 3 个不同复选框的值。

<form  method="post" enctype="multipart/form-data" id="form_save">
  <input type="checkbox" name="first"  id="first"  class="first">First <br>
  <input type="checkbox" name="second" id="second" class="second">Second <br>
  <input type="checkbox" name="third"  id="third"  class="third">Third <br>
  <button type="submit" id="save" class="save-icon-btn" >
    <img src="img/Save.png" >
  </button>
</form>

<script type="text/javascript">
  $("#form_save").submit(function() 
    {
      var formData = new FormData();

      formData.append('first', first.value);
      formData.append('second', second.value);
      formData.append('third', third.value);

     jQuery.ajax(
      {
        type: "POST",
        url: "abc/def",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) 
          {
            alert(res);
            //console.log(res);
          },
        error: function(errResponse) 
          {
            console.log(errResponse);
          }
      });
      return false;
   });

后台

$data = array(
  'first' => $this->input->post('first'),
  'second' => $this->input->post('second'),
  'third' => $this->input->post('third')
);

即使未选中复选框，我也会将第一、第二、第三的值设为“开启”。是否可以将值捕获为开关或真假，具体取决于该值是选中还是未选中

【问题讨论】：

为什么不直接使用$('form').serializeArray(); 来捕获表单数据并将其发送到 php。另外，对于开关值，创建具有默认值 0 的同名隐藏复选框。看这里：-<input type="checkbox" name="SomeBooleanProperty" value="true" /> <input type="hidden" name="SomeBooleanProperty" value="false" />
@Alive to Die 我已经构建了非常广泛的整个表单，这些复选框是在稍后阶段添加的，因此我没有更改整个代码，而是试图找到解决方案当前代码
然后照我说的做，为每个人创建隐藏的复选框。再次查看我的评论

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

对于radio 和checkbox，使用.checked

$("#form_save").submit(function(event){
  event.preventDefault();
  alert(first.checked);
  alert(second.checked);
  alert(third.checked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  method="post" enctype="multipart/form-data" id="form_save">
  <input type="checkbox" name="first"  id="first"  class="first">First <br>
  <input type="checkbox" name="second" id="second" class="second">Second <br>
  <input type="checkbox" name="third"  id="third"  class="third">Third <br>
  <button type="submit" id="save" class="save-icon-btn" >
    <img src="img/Save.png" >
  </button>
</form>

【讨论】：

【解决方案2】：

  $("#form_save").submit(function() 
    {
      var formData = new FormData();

      formData.append('first', $('input[name=first]').val());
      formData.append('second', $('input[name=second]').val());
      formData.append('third', $('input[name=third]').val());

     jQuery.ajax(
      {
        type: "POST",
        url: "abc/def",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) 
          {
            alert(res);
            //console.log(res);
          },
        error: function(errResponse) 
          {
            console.log(errResponse);
          }
      });
      return false;
   });

【讨论】：