根据 ajax 响应中的值设置复选框状态

Setting checkbox state based on values from ajax response

本文关键字：设置 复选框 状态 ajax 响应 根据      更新时间：2023-09-26

我通过ajax/jquery从我的数据库中获取值（1或0），我想根据为每个状态返回的值设置一堆复选框选中状态。

因此，首先，我为所有复选框设置值。然后我运行一个函数来根据值设置复选框选中状态。当我尝试这样做时，无论值如何，都会选中所有复选框：

我的 Ajax 响应片段 （jQuery） 

    .success(function(response) {
        $('input').removeClass('error').next('.errormessage').html('');
        if(!response.errors && response.result) {
            $.each(response.result, function( index, value) {
                $("#checkbox1").prop('value',value[2]);
                $("#checkbox2").prop('value',value[3]);
                $("#checkbox3").prop('value',value[4]);
                $("#checkbox4").prop('value',value[5]);
           });
            $("#div :checkbox").each(function () {
                 if ($(this).attr('value', '1')){
                     $(this).attr('checked', true);
                 }
                 else
                  if ($(this).attr('value', '0')){
                     $(this).attr('checked', false);
                 }
                }); 
        } else {
            $.each(response.errors, function( index, value) {
                $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
            });
        }
    });

您可能正在尝试使用字符串设置复选框 false 的值。这行不通。您需要它是布尔值真/假或 0/1 .. 值"0"将设置复选框"选中"。请参阅示例以及第二个复选框如何保持选中状态。

$(document).ready(function() {
  $("#chkbox1").prop("checked", 0);
  $("#chkbox2").prop("checked", "0");
  $("#chkbox3").prop("checked", 1);
  $("#chkbox4").prop("checked", "1");
  $("#chkbox5").prop("checked", parseInt("0"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
  <input id="chkbox1" type="checkbox" name="chk" checked />checkbox1
</label>
<label>
  <input id="chkbox2" type="checkbox" name="chk" checked/>checkbox2
</label>
<label>
  <input id="chkbox3" type="checkbox" name="chk" />checkbox3
</label>
<label>
  <input id="chkbox4" type="checkbox" name="chk" />checkbox4
</label>
<p>
  <label>
    <input id="chkbox5" type="checkbox" name="chk" checked />checkbox5
  </label>
</p>

要正确"选中/取消选中"一个 chekcbox，您应该使用 jQuery 函数prop('checked',true)或prop('checked',false)。

以这种方式更改 if/else 语句：

             if ($(this).attr('value', '1')){
                 $(this).prop('checked', true);
             }
             else
              if ($(this).attr('value', '0')){
                 $(this).prop('checked', false);
             }

您没有检查当前值，而是将所有复选框的值设置为 1;

if ($(this).attr('value', '1')){

.attr（'属性名称'， [要设置的新值]）;

所以你用错了这个函数。要获得价值，请尝试

if ($(this).attr('value')){

在这里，您将获得 1 或 0，就像您所说的那样，您在 ajax 之后从服务器获得 1 和 0。

相关文章：