ChatGPT解决这个技术问题 Extra ChatGPT

jQuery checkbox change and click event

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

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.
It's not the best, but I believe it's working for me here: http://jsfiddle.net/Skooljester/2Xxcn/.

c
callmebob

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 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.
@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).
I would recommend .prop() instead of .attr() since the latter does not work in all cases and I believe that jQuery recommend .prop() now.
I think that [this] in $('#textbox1').val(this.checked); refers to document. It should be $('#textbox1').val($('#checkbox1').is(':checked'));
C
Community

Demo

Use mousedown

$('#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.
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.
It works when using the mouse, but not if you are checking it with the keyboard.
@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.
Downvoted since mousedown is not the only way a user can interact with the checkbox.
l
lko

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


It is #OuterDivOrBody not .OuterDivOrBody :)
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.
z
zarun

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


P
Pedro Lobito

Late answer, but you can also use on("change")

$('#check').on('change', function() { var checked = this.checked $('span').html(checked.toString()) }); Check me!


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

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>

c
chris

For me this works great:

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

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

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.


M
Mrchief

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/


u
umer

if you are using the iCheck Jquery use the below code

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

M
Marty

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

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

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

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

S
ShankarSangoli

Try this

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

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

M
Marcelo De Zen
// 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;
    });
});

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

C
Char

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

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

S
Siva Anand

get radio value by name

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

K
Kamil Kiełczewski

Try

checkbox1.onclick= e => { if(!checkbox1.checked) checkbox1.checked = !confirm("Are you sure?"); textbox1.value = checkbox1.checked; }


Z
Zahra Badri

Try this:

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

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

        }
        else {

        }

    })

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