引导开关值通过ajax传递为“on”，即使它未被选中

Question

我有一个带有两个 Bootstrap 开关的简单表单。

<div class="row mt-5">
                    <div class="col-xl-3">
                        <h5>Minutes</h5>
                        <div class="div ml-3">
                            <div class="form-check form-switch" >
                                <input class="form-check-input minutes" type="checkbox" id="minutes" name="minutes">
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <h5>Accounts</h5>
                        <div class="div ml-3">
                        <div class="form-check form-switch" >
                                <input class="form-check-input minutes" type="checkbox" id="accounts" name="accounts">
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 pt-3">
                        <button class="btn btn-success btn-lg float-end" type="submit" onclick="addEntry();" name="record" id="record"> <i class="fas fa-save"></i> Record</button>
                    </div>
                </div>

这是脚本

<script>
function addEntry() {
    jQuery.ajax({
    url: "do-add-data.php",
    data:'+'accounts='+$("#accounts").val()+'&minutes='+$("#minutes").val(),
    type: "POST",
    success:function(data){
    $("#addrecord").html(data);
    },
    error:function (){}
    });
    }
</script>

当我检查

do-add-data.php

时，

accounts

和

minutes

的值始终“打开”，即使开关未打开（未检查）

如何解决这个问题？

Answer 1

我认为您误解了复选框的工作原理。

您没有在 HTML 中为复选框指定任何

value

，因此它们的默认

value

将处于“打开”状态（根据 https://developer.mozilla.org/en-US/docs/Web/ HTML/元素/输入/复选框#值）。

但是复选框的

value

与是否选中无关。

如果你想通知服务器你的复选框是否被选中，你需要询问它们的

checked

属性。这是一个例子：

function addEntry() {
  jQuery.ajax({
    url: "do-add-data.php",
    data: {
      "accounts": $("#accounts").prop("checked"),
      "minutes": $("#minutes").prop("checked")
    },
    type: "POST",
    success: function(data) {
      $("#addrecord").html(data);
    },
    error: function() {}
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row mt-5">
  <div class="col-xl-3">
    <h5>Minutes</h5>
    <div class="div ml-3">
      <div class="form-check form-switch">
        <input class="form-check-input minutes" type="checkbox" id="minutes" name="minutes">
      </div>
    </div>
  </div>
  <div class="col-xl-3">
    <h5>Accounts</h5>
    <div class="div ml-3">
      <div class="form-check form-switch">
        <input class="form-check-input minutes" type="checkbox" id="accounts" name="accounts">
      </div>
    </div>
  </div>
  <div class="col-xl-6 pt-3">
    <button class="btn btn-success btn-lg float-end" type="submit" onclick="addEntry();" name="record" id="record"> <i class="fas fa-save"></i> Record</button>
  </div>
</div>

这将为每个复选框发送

true

或

false

到服务器，具体取决于是否选中。

参考资料：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
• https://api.jquery.com/prop/