jQuery checkbox change and click event

Question

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

Outsoar

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. – Decarbonize

It's not the best, but I believe it's working for me here: http://jsfiddle.net/Skooljester/2Xxcn/. – Belaud

Answer 1

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

Decarbonize

Just a note, it's much faster to use this.checked instead of $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5 – Catfall

@Catfall 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. – Auschwitz

@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). – Extrados

I would recommend .prop() instead of .attr() since the latter does not work in all cases and I believe that jQuery recommend .prop() now. – Romantic

@RyanMcArthur no, it's returning current state. – Welford

@MarkoMackic You're right, mis-read that. Deleted my comment to avoid causing any confusion, thanks. – Innuendo

I think that [this] in $('#textbox1').val(this.checked); refers to document. It should be $('#textbox1').val($('#checkbox1').is(':checked')); – Overcritical

Answer 2

Demo

Use mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Ketchum

It displays the alert when checking it and it always prevents me from checking in fact. This is on Chrome. – Chery

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. – Outsoar

@Joseph: Thanks for the edit but the textbox does not change. – Chery

@Chery oh! textbox? that's not the main issue :P – Ketchum

@Joseph the confirmation comes up on check with mousedown. Can it be changed so it comes up on uncheck? – Outsoar

OK, upvote :) Though checking using the keyboard is a workaround for the confirm now. – Chery

It works when using the mouse, but not if you are checking it with the keyboard. – Diadiabase

@Diadiabase 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. – Ketchum

Joseph, do you know if this solution works for a blind person accessing the page? I was told in another context to stay away from mouse events because it makes it difficult for blind people to use the page. – Decarbonize

@Decarbonize I, unfortunately, am not an expert in that area, but I would venture to guess that it is not a good solution for that situation. I'm not sure how screen readers handle forms. I imagine they use the keyboard spacebar to select or deselect checkboxes, in which case I would say either use a keydown event or better yet ignore the issue and leave it to the changed event. The issue here was that of the checkbox looking checked before you confirmed or canceled. Such aesthetics would not be important to someone using a screen reader. – Ketchum

what we do incase on selecting checkbox with label..?<input type="checkbox" id="checkbox1" /> <label for="checkbox1">click</label> – Inflection

@VivekVikranth You can just add the same event to the label. You could get fancy and determine the appropriate radio button when the event is triggered, but for demonstration purposes, here is a simple example: jsfiddle.net/4DqXv/888 – Ketchum

Downvoted since mousedown is not the only way a user can interact with the checkbox. – Layamon

@JosephMarikle your solution does not work if we checkbox is in a wrapper of label and user clicks on label text. Please share any suggestion, you have. Thanks. – Bendy

@Layamon I have used click event instead of mousedown and it worked for me for all the situations. Thanks. – Bendy

Answer 3

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

Epagoge

It is #OuterDivOrBody not .OuterDivOrBody :) – Scatter

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. – Grunt

Answer 4

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

Rech

Answer 5

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>

Electromotor

thank you, the above answers are to much details, yours is simple and enough. thanks – Surrogate

Answer 6

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>

Aleda

Answer 7

For me this works great:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

Cat

Came across this via a web search. You should use 'prop' instead of 'attr' >> api.jquery.com/prop – Getz

Answer 8

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

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

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

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

Alsworth

Answer 9

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.

Saloop

Answer 10

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/

Gastrostomy

Answer 11

if you are using the iCheck Jquery use the below code

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

Toronto

Answer 12

Try this

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

Ectoblast

Answer 13

$(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'));
            }
        }
    });
});

Friedly

Answer 14

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

Lizethlizette

Answer 15

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

Cayes

Answer 16

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

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

Prune

Answer 17

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

Astaire

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. – Geophilous

You should add explanation. – Margiemargin

Answer 18

get radio value by name

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

Mccraw

Answer 19

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

Illfavored

Answer 20

Try this:

    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }

Susumu

Answer 21

 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

Violist

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/… – Operculum