javascript - How to uncheck the checkbox in AJAX? - Stack Overflow

admin管理员组

文章数量:1292937

Seriously i have tried everything that i could think of but i still cant find a way how to uncheck the checkbox once popping up the alert.

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");
                }
            });

I want to uncheck the checkbox after the alert('You only allowed to select maximum 3'); but not working. i also tried using this.checked = false, $(this).attr('checked', false);, $(this).prop('checked', false); but still its not uncheck the checkbox.

NOTE: this.checked = false works when outside from ajax. but when i put it on the inside, its not working.

Seriously i have tried everything that i could think of but i still cant find a way how to uncheck the checkbox once popping up the alert.

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");
                }
            });

I want to uncheck the checkbox after the alert('You only allowed to select maximum 3'); but not working. i also tried using this.checked = false, $(this).attr('checked', false);, $(this).prop('checked', false); but still its not uncheck the checkbox.

NOTE: this.checked = false works when outside from ajax. but when i put it on the inside, its not working.

• javascript
• jquery
• ajax
• checkbox

Share Improve this question Follow asked Aug 6, 2016 at 16:41 AhKingAhKing 19122 silver badges1515 bronze badges 3

• $(this) is undefined. use an id for your checkbox. – Louys Patrice Bessette Commented Aug 6, 2016 at 16:48
• Your code is fine. It has something todo with html attribute that you did not specified. Try adding checked="checked" in your html and your code will work as expected. Also it's not an ajax, jquery nor javascript issue. It is just a DOM attribute error which cannot be found. Cheers :D – agentpx Commented Aug 6, 2016 at 16:49
• Yeah i think it must be it. 2 possible cause i can think of is my id is undefined or something wrong with my dom attribute. Let me revise my code back – AhKing Commented Aug 6, 2016 at 16:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You're writing your code inside $.get and trying to refer to that checkbox using $this. Are you sure this is correct? $(this) here is undefined.

You should use checkbox actual id instead:

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

---

EDIT

Your final code would then look like this:

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");
    }
});

Another way to do it without if statements:

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

So !$(".checkbox").prop("checked") equals the opposite of the current checked status - call that toggles checked checkboxes to be unchecked, and vice versa for unchecked checkboxes.

To check/uncheck checkboxes you need to:

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

It's a property and not an attribute.

NOTE: this.checked = false works when outside from ajax. but when i put it on the inside, its not working.

So you need to bind the "this" object to the get function:

function setsession() {
  }

var sBorrowValue;

$(function () {
  $('#chk').on('click', function(e) {
    $.getJSON('https://api.github./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

You should have to uncheck the checkbox by its id not by $(this) and you should also have to check status of checkbox "checked" or not by id of checkbox. Please refer below snippet for more details.

function setsession() {
  }

var sBorrowValue;

$(function () {
  $('#chk').on('click', function(e) {
    $.getJSON('https://api.github./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

Oh well. I did solve the problem. Its about using variables inside my ajax function actually.

    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");
        }

Notice what i changed? i use async:false. and this time i just tried using this.checked = false. Then it works. However i seems to heard that this async:false has been deprecated. So i am not sure if this is good solution

本文标签： javascriptHow to uncheck the checkbox in AJAXStack Overflow