如何取消选中 AJAX 中的复选框？答案

【问题标题】：How to uncheck the checkbox in AJAX?如何取消选中 AJAX 中的复选框？
【发布时间】：2016-12-12 21:20:14
【问题描述】：

说真的，我已经尝试了所有我能想到的方法，但我仍然找不到在弹出警报后如何取消选中复选框的方法。

var sessionvar;
            $.ajaxSetup({cache: false})
            $.get('test.php' ,function (data) {
                sessionvar = data;
                alert(sessionvar);
                if(checked){    
                    if(sessionvar > 2){
                        alert('You only allowed to select maximum 3');
                        setsession(sBorrowValue, "UNSET");
                        $(this).attr('checked', false);
                    }
                    else{
                        setsession(sBorrowValue, "SET");
                    }
                }
                else{
                    setsession(sBorrowValue, "UNSET");
                }
            });

我想取消选中alert('You only allowed to select maximum 3'); 之后的复选框，但不起作用。我也尝试使用this.checked = false、$(this).attr('checked', false);、$(this).prop('checked', false);，但仍然没有取消选中复选框。

注意：this.checked = false 在 ajax 外部时有效。但是当我把它放在里面时，它就不起作用了。

【问题讨论】：

$(this) 是 undefined。为您的复选框使用id。
你的代码没问题。它与您未指定的 html 属性有关。尝试在您的 html 中添加 checked="checked" ，您的代码将按预期工作。这也不是 ajax、jquery 或 javascript 问题。这只是一个找不到的 DOM 属性错误。干杯：D
是的，我想一定是它。我能想到的 2 个可能原因是我的 id 未定义或我的 dom 属性有问题。让我修改我的代码

标签： javascript jquery ajax checkbox

【解决方案1】：

您在$.get 中编写代码并尝试使用$this 引用该checkbox。你确定这是正确的吗？ $(this) 这里是未定义的。

您应该使用复选框实际 ID：

$('#myCheckboxid').attr('checked', false); //or true

编辑

您的最终代码将如下所示：

var sessionvar;
$.ajaxSetup({cache: false})
$.get('test.php' ,function (data) {
    sessionvar = data;
    alert(sessionvar);
    if(checked){    
        if(sessionvar > 2){
            alert('You only allowed to select maximum 3');
            setsession(sBorrowValue, "UNSET");
            $('#myCheckboxid').attr('checked', false); //or true
        }
        else{
            setsession(sBorrowValue, "SET");
        }
    }
    else{
        setsession(sBorrowValue, "UNSET");
    }
});

【讨论】：

您的回答对我来说似乎是合乎逻辑的。我想它一定是找不到我指的id。嗯，让我先重新考虑一下我的代码

【解决方案2】：

哦，好吧。我确实解决了这个问题。它实际上是在我的 ajax 函数中使用变量。

    var sessionvar;
        $.ajaxSetup({cache: false, async:false})
        $.get('test.php' ,function (data) {
            sessionvar = data;
            alert(sessionvar);
        });

        var sBorrowChecked = $('.sBorrow').attr('checked');
        alert(sBorrowChecked);
        if(checked){    
            if(sessionvar > 2){
                alert('You only allowed to select maximum 3');
                setsession(sBorrowValue, "UNSET");
                this.checked = false;

            }
            else{
                setsession(sBorrowValue, "SET");
            }
        }
        else{
            setsession(sBorrowValue, "UNSET");
        }

注意我改变了什么？我使用async:false。而这次我只是尝试使用this.checked = false。然后它工作。但是我似乎听说这个async:false 已被弃用。所以我不确定这是否是一个好的解决方案

【讨论】：

我仍然想知道为什么 this.checked = false 不能在 ajax 中工作。

【解决方案3】：

您应该通过其 id 而不是通过 $(this) 取消选中复选框，并且您还应该通过复选框的 id 检查复选框“已选中”的状态。详情请参考以下sn-p。

function setsession() {
  }

var sBorrowValue;

$(function () {
  $('#chk').on('click', function(e) {
    $.getJSON('https://api.github.com/repositories?since=800' ,function (data) {
      sessionvar = data;
      console.log('Now inside the ajax this is: ' + this.outerHTML);
      $("#chk").prop('checked',false);
      if ($("#chk").is(':checked')){
        $("#chk").prop('checked',false);
        if(sessionvar > 2){
          alert('You only allowed to select maximum 3');
          setsession(sBorrowValue, "UNSET");

        }
        else{
          setsession(sBorrowValue, "SET");
        }
      }
      else{
        setsession(sBorrowValue, "UNSET");
      }
    }.bind(this));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="checkbox" id="chk">
</form>

【讨论】：

【解决方案4】：

要选中/取消选中复选框，您需要：

$(this).prop('checked', false);    
$(this).prop('checked', true);

这是一个属性，而不是一个属性。

注意：this.checked = false 在 ajax 外部时有效。但是当我把它放在里面时，它就不起作用了。

所以你需要将“this”对象绑定到get函数：

function setsession() {
  }

var sBorrowValue;

$(function () {
  $('#chk').on('click', function(e) {
    $.getJSON('https://api.github.com/repositories?since=800' ,function (data) {
      sessionvar = data;
      console.log('Now inside the ajax this is: ' + this.outerHTML);
      alert(sessionvar);
      if (this.checked){
        if(sessionvar > 2){
          alert('You only allowed to select maximum 3');
          setsession(sBorrowValue, "UNSET");

          // use prop

          $(this).prop('checked', false);
        }
        else{
          setsession(sBorrowValue, "SET");
        }
      }
      else{
        setsession(sBorrowValue, "UNSET");
      }
    }.bind(this));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="checkbox" id="chk">
</form>

【讨论】：

【解决方案5】：

不使用 if 语句的另一种方法：

$(".checkbox").prop("checked", !$(".checkbox").prop("checked"));

所以 !$(".checkbox").prop("checked") 等于当前选中状态的反面 - 调用将选中的复选框切换为未选中，反之亦然。

【讨论】：