$(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?
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 .
Checkbox event handling using pure Javascript There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
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')); }); });
Use mousedown
$('#checkbox1').mousedown(function() { if (!$(this).is(':checked')) { this.checked = confirm("Are you sure?"); $(this).trigger("change"); } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With