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

Posted 2023-05-08

【中文标题】选中复选框时如何将AJAX值发送为1，未选中时如何发送0？

【英文标题】：How to send AJAX value as 1 when checkbox is checked and 0 when it is not checked?

【发布时间】：2021-10-14 12:11:24

【问题描述】：

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

$("#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>

【问题讨论】：

一个问题是表单和输入都有 ID“onoff”。在 html 中，IDs must be unique to the DOM tree，即不能重复。

抱歉，我已经编辑了我的表单 ID。但我的 ajax 没有得到价值

是什么触发了这个 ajax 请求？

【参考方案1】：

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

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

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

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

...您可以将<input> 直接嵌套在<label> 中，在这种情况下不需要for 和id 属性，因为关联是隐式的（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>

【参考方案2】：

第一个： ID 必须是唯一的，不要为多个元素使用相同的 id

第二个： $("#hidden_onoff") 是 label 所以它有 .text() 而不是 .val()

第三个：您可以使用一个元素事件来触发另一个元素事件，这将更容易处理

看看这个示例代码.. 将 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>