javascript - jQuery checkbox change and click event

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));
  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>
Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation.
This leaves things in an inconsistent state and the textbox says false when the checkbox is checked.
How can I deal with the cancellation and keep textbox value consistent with the check state?
                It works in FF and chrome and has the explained behavior in IE 8.  So it may be important to note which browsers you need this to work in and which ones you're seeing the error.
– kasdega
                Aug 11, 2011 at 18:56
                It's not the best, but I believe it's working for me here: http://jsfiddle.net/Skooljester/2Xxcn/.
– ayyp
                Aug 11, 2011 at 19:00
Tested in JSFiddle and does what you're asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked. 
Updated Answer:
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);
    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        $('#textbox1').val(this.checked);        
Original Answer:
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));
    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        $('#textbox1').val($(this).is(':checked'));        
                Just a note, it's much faster to use this.checked instead of $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
– Dakota
                Jul 7, 2014 at 17:39
                @Dakota Granted, it is much slower, but we're still talking 600k operations/sec. So, 600 times per millisecond.  I think if this starts causing performance issues on your web page, you might need to re-eval your javascript ;)  It is good to understand performance metrics with code, though. Thanks.
– Mike U
                Jan 8, 2015 at 15:47
                @MikeU: Agree with you on the premature optimization, but considering that this.checked is much shorter to write + native javascript, it might be really worth using in general (apart from being ~200 to 300 times faster).
– Levite
                Mar 18, 2015 at 10:37
                I would recommend .prop() instead of .attr() since the latter does not work in all cases and I believe that jQuery recommend .prop() now.
– kabadisha
                Jun 5, 2016 at 16:28
                I think that [this] in $('#textbox1').val(this.checked); refers to document. It should be $('#textbox1').val($('#checkbox1').is(':checked'));
– yurin
                Mar 10, 2018 at 15:01
$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
                It displays the alert when checking it and it always prevents me from checking in fact. This is on Chrome.
– pimvdb
                Aug 11, 2011 at 18:54
                same as @pimvdm. The confirmation pops up even for check-action (it should only pop up for uncheck) and selecting ok does not result in checking the box.
– Professor Chaos
                Aug 11, 2011 at 18:57
                @frinux That's quite simply because it's a mouse related question.  Please don't downvote answers based on their relevance to entirely separate issues.  If you have a problem triggering the state of an indicator after a checkbox check via keyboard, please post a question about it instead of downvoting answers carelessly.
– Joseph Marikle
                Feb 22, 2013 at 15:07
Most of the answers won't catch it (presumably) if you use <label for="cbId">cb name</label>. This means when you click the label it will check the box instead of directly clicking on the checkbox. (Not exactly the question, but various search results tend to come here)
<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    The confirm result:
    <input type="text" id="textbox1" />
In which case you could use:
Earlier versions of jQuery:
$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
JSFiddle example with jQuery 1.6.4
jQuery 1.7+
$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
JSFiddle example with the latest jQuery 2.x
Added jsfiddle examples and the html with the clickable checkbox label
                I know this is SUPER OLD but I came across it looking for something else and wanted to let you know that in the second example (I didn't check the first fiddle) if the person clicks cancel, you are still unchecking and showing false, if they cancel then it should leave it check and say true. Just in case you want to fix it.
– GµårÐïåñ
                Jun 23, 2020 at 17:50
Well .. just for the sake of saving a headache (its past midnight here), I could come up with:
$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
Hope it helps
$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check"> <span>Check me!</span>
<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">
JavaScript
<script>
    $(document).ready(function () {
      $('input[id^="ProductId_"]').click(function () {
        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        else {
           // do what you need here         
           alert("Unchecked");
</script>
                Came across this via a web search. You should use 'prop' instead of 'attr' >> api.jquery.com/prop
– Dr Schizo
                Aug 20, 2013 at 13:30
simply just use the click event
my check box id is CheckAll
     $('#CheckAll').click(function () {
        if ($('#CheckAll').is(':checked') == true) {
             alert(";)");
Checkbox click and checking for the value in the same event loop is the problem.
Try this:
$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {
        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
    }, 0);
Demo: http://jsfiddle.net/mrchief/JsUWv/6/
if you are using the iCheck Jquery use the below code 
 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));
    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));
    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    $('#textbox1').val($(this).is(':checked')); 
<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
                resetAll();                 
checkbox1.onclick= e => {
  if(!checkbox1.checked) checkbox1.checked = !confirm("Are you sure?");
  textbox1.value = checkbox1.checked;
<input type="checkbox" id="checkbox1" /><br />
<input type="text" id="textbox1" value='false'/>
Try this:
    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
        alert("select checkbox");
                Code-only answers are considered low quality: make sure to provide an explanation what your code does and how it solves the problem. It will help the asker and future readers both if you can add more information in your post. See also Explaining entirely code-based answers: meta.stackexchange.com/questions/114762/…
– borchvm
                Jan 29, 2020 at 6:57
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.