-2

I'm trying to check/uncheck a checkbox using jQuery 1.12. This is my code:

$(document).ready(function() {
  $('#btn-agree').click(function() {
    $('#checkbox-3').prop('checked', true);
  });
  $('#btn-notagree').click(function() {
    $('#checkbox-3').prop('checked', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3" />
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

When I click btn-agree, the function doesn't return any errors, but the checkbox is not checked. console.log($('#checkbox-3').prop('checked'); show true

Can anyone point out what's wrong in my code?

edit I believe the problem comes from somewhere else in my project. please feel free to delete this question.

dapidmini
  • 1,490
  • 2
  • 23
  • 46
  • You are bind event with only `btn-agree` use `$('#btn-notagree')` for binding second click handler. – Satpal Dec 01 '16 at 08:30
  • Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) – jkris Dec 01 '16 at 08:31
  • @Satpal oh right. sorry, I wrote the wrong code. the second one was supposed to be #btn-notagree – dapidmini Dec 01 '16 at 08:35
  • @jkris yes, I've seen that thread before. that's why I'm confused as why this code doesn't work – dapidmini Dec 01 '16 at 08:36
  • I've put your code in a snippet. As you can see it works absolutely fine. The only reason I can see this not working is that you didn't wrap it in a document.ready handler. – Rory McCrossan Dec 01 '16 at 08:37
  • Your code seems to be working -_- – Ikhlak S. Dec 01 '16 at 08:43
  • @PranavCBalan the problem persists even after the typo is fixed.. any ideas? – dapidmini Dec 01 '16 at 08:46
  • ok I believe the problem is somewhere else in the code spaghetti. I'll just leave this problem for another day. thanks for the quick responses though.. – dapidmini Dec 01 '16 at 08:53

3 Answers3

0

You have to do something like this,that is chekc whether the checkbox is checked and if so uncheck it else check it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    if($('#checkbox-3').prop('checked'))
    $('#checkbox-3').prop('checked',false);
  else{
    $('#checkbox-3').prop('checked',true);
    }
  });
});
  </script>
GraveyardQueen
  • 771
  • 1
  • 7
  • 17
0

You can also use is(':checked') to check whether the checkbox checked or not checked

$(document).ready(function() {
    $('#btn-agree').click(function() {
        if($("#checkbox-3").is(':checked') )
        {
            $("#checkbox-3").prop('checked',false);
        }            
        else
        {
            $("#checkbox-3").prop('checked',true); 
        }                    
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>
Uttam Kumar Roy
  • 2,060
  • 4
  • 23
  • 29
0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    $(this).prop('checked',true);
  });
$('#btn-notagree').click(function() {
    $(this).prop('checked',false);
  });
});
  </script>
sainanky
  • 507
  • 4
  • 13