如何在选中复选框时将 AJAX 值发送为 1，未选中时发送 0？

Question

我有一个复选框，它在选中时会更改文本（选中时文本 = 开启，取消选中时文本 = 关闭，此值为 0 和 1）我想获取值 0 或 1（选中获取 1 取消选中获取 0） ajax 但我在代码中混淆了

$("#onoff").click(function() {
  if ($(this).is(':checked')) {
    $("#hidden_onoff").text("ON");
  } else {
    $("#hidden_onoff").text("OFF");
  }
});

$('#onoff').change(function() {
  if ($(this).prop('checked')) {
    $('#hidden_onoff').val('1');
  } else {
    $('#hidden_onoff').val('0');
  }
});

$.ajax({
  url: "/on_off",
  method: "POST",
  data: {
    onoff: $("#hidden_onoff").val(),
  },
  success: function(data) {}
});

<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="hidden_onoff">ON</label>
    </div>
  </div>
</form>

Answer 1

1st: ID 必须是唯一的不要对多个元素使用相同的 ID

2nd: $("#hidden_onoff") 是一个 label 所以它有一个 .text() 而不是 .val()

3rd:你可以用一个元素事件来触发另一个元素事件这样会更容易处理

看看这个示例代码.. 将 ID 更改为 form_onoff 和 text_onoff

$(document).ready(function(){
  $("#text_onoff").on( 'click' ,function() {
    $('#onoff').prop('checked' , $('#onoff').prop('checked') ? false : true).change();
  });

  $('#onoff').on('change', function(){
    $(this).val(this.checked ? '1' : '0');
    $("#text_onoff").text(this.checked ? 'ON' : 'OFF');
    
    console.log($('#onoff').val());
    
    /*$.ajax({
      url:"/onoff",
      method:"POST",
      data:{ onoff:$("#onoff").val()},
      success:function(data){
        console.log(data)
      }
    });*/
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form_onoff" >
  <div class="container">
    <div class="form-check form-check-inline" >
      <input id="onoff" type="checkbox" checked="checked" value="1"/>
      <label class="checkbox-inline" id="text_onoff">
          ON
      </label>
    </div>
  </div>
</form>

<script>

</script>

Answer 2

您正在设置 <label id="hidden_onoff"> 的 value 而不是 <input id="onoff">:

$('#hidden_onoff').val('1');

但是，由于您正在使用 AJAX，因此您似乎并不需要更改输入的值。您可以根据是否检查输入定义一个变量，并将该变量的值发送到服务器。

此外，您似乎并不需要同时使用 click 和 change 处理程序。您可以单独使用 change 事件。如果您的意图是在单击文本时更改输入，我建议将输入和文本元素都包装在 <label>.

中

... you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit (label @ MDN)

最后，看起来您是在页面加载时而不是在输入更改时执行 AJAX。我建议从事件处理程序内部执行 AJAX。

这里有一个演示：

// select the input and label elements and store them as constants
const $onoff = $('#onoff');
const $label = $('#onoff_label');

// bind a change event handler to the input
$onoff.on('change', function() {

  // define value and label (1 and ON, or 0 and OFF)
  let cbox_value = $onoff.is(':checked') ? 1 : 0;
  let cbox_label = cbox_value ? 'ON' : 'OFF';

  // set label text (ON or OFF)
  $label.text(cbox_label);

  // send value via AJAX (0 or 1)
  $.ajax({
    url: "https://reqres.in/api/users",
    method: "POST",
    data: {
      onoff: cbox_value
    },
    success: function(data) {
      // show the result from server
      console.log(data.onoff);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input id="onoff" type="checkbox" checked="checked">
  <span id="onoff_label">ON</span>
</label>

如何在选中复选框时将 AJAX 值发送为 1，未选中时发送 0？

How to send AJAX value as 1 when checkbox is checked and 0 when it is not checked?

javascript

ajax

checkbox

jquery