711

$(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?

2
  • 1
    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
    Commented 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
    Commented Aug 11, 2011 at 19:00

21 Answers 21

1119

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'));        
    });
});
7
  • 140
    Just a note, it's much faster to use this.checked instead of $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
    – Dakota
    Commented Jul 7, 2014 at 17:39
  • 44
    @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
    Commented Jan 8, 2015 at 15:47
  • 58
    @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
    Commented Mar 18, 2015 at 10:37
  • 12
    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
    Commented Jun 5, 2016 at 16:28
  • 3
    I think that [this] in $('#textbox1').val(this.checked); refers to document. It should be $('#textbox1').val($('#checkbox1').is(':checked'));
    – Yuriy N.
    Commented Mar 10, 2018 at 15:01
99

Demo

Use mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});
15
  • It displays the alert when checking it and it always prevents me from checking in fact. This is on Chrome.
    – pimvdb
    Commented 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. Commented Aug 11, 2011 at 18:57
  • 1
    It works when using the mouse, but not if you are checking it with the keyboard.
    – frinux
    Commented Feb 22, 2013 at 11:17
  • 3
    @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. Commented Feb 22, 2013 at 15:07
  • 8
    Downvoted since mousedown is not the only way a user can interact with the checkbox.
    – Jonathan
    Commented Aug 14, 2017 at 10:01
60

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>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

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
2
  • 1
    It is #OuterDivOrBody not .OuterDivOrBody :) Commented Aug 2, 2017 at 8:16
  • 1
    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. Commented Jun 23, 2020 at 17:50
30

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

0
26

Late answer, but you can also use on("change"), i.e.:

$('#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>

1
  • 2
    thank you, the above answers are to much details, yours is simple and enough. thanks Commented Jun 14, 2021 at 8:06
12

Here you are

Html

<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>
11

For me this works great:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})
1
  • 4
    Came across this via a web search. You should use 'prop' instead of 'attr' >> api.jquery.com/prop
    – Dr Schizo
    Commented Aug 20, 2013 at 13:30
7

simply just use the click event my check box id is CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    });
6

Get rid of the change event, and instead change the value of the textbox in the click event. Rather than returning the result of the confirm, catch it in a var. If its true, change the value. Then return the var.

6

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/

6

if you are using the iCheck Jquery use the below code

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });
0
5

Try this

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });
5
$(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'));
            }
        }
    });
});
5
// this works on all browsers.

$(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;
    });
});
4
$('#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" />
</div>
3

I am not sure why everyone is making this so complicated. This is all I did.

if(!$(this).is(":checked")){ console.log("on"); }
2

$('#checkboxId').change(() => {
    if($('#checkboxId').is(':checked')) {
        $('#checkboxStatus').text('Active')
    } else {
        $('#checkboxStatus').text('Inactive')
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<label><input type="checkbox" id="checkboxId">Click on me!</lable>
<div id="checkboxStatus">Off</div>

2
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jun 18, 2023 at 0:10
  • You should add explanation. Commented Jun 18, 2023 at 12:09
1

get radio value by name

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
0

Try

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'/>

0

Try this:

    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }
-2
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })
1
  • 3
    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/…
    – Borja
    Commented Jan 29, 2020 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.