jQuery checkbox change and click event
JavascriptJqueryCheckboxEvent HandlingJavascript Problem Overview
$(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?
Javascript Solutions
Solution 1 - Javascript
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'));
});
});
Solution 2 - Javascript
Demo
Use mousedown
$('#checkbox1').mousedown(function() {
if (!$(this).is(':checked')) {
this.checked = confirm("Are you sure?");
$(this).trigger("change");
}
});
Solution 3 - Javascript
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
Solution 4 - Javascript
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
Solution 5 - Javascript
Late answer, but you can also use on("change")
$('#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>
Solution 6 - Javascript
For me this works great:
$('#checkboxID').click(function () {
if ($(this).attr('checked')) {
alert('is checked');
} else {
alert('is not checked');
}
})
Solution 7 - Javascript
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>
Solution 8 - Javascript
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.
Solution 9 - Javascript
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);
});
Solution 10 - Javascript
if you are using the iCheck Jquery use the below code
$("#CheckBoxId").on('ifChanged', function () {
alert($(this).val());
});
Solution 11 - Javascript
Try this
$('#checkbox1').click(function() {
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = sure;
$('#textbox1').val(sure.toString());
}
});
Solution 12 - Javascript
$(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'));
}
}
});
});
Solution 13 - Javascript
// 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;
});
});
Solution 14 - Javascript
simply just use the click event my check box id is CheckAll
$('#CheckAll').click(function () {
if ($('#CheckAll').is(':checked') == true) {
alert(";)");
}
});
Solution 15 - Javascript
$('#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>
Solution 16 - Javascript
I am not sure why everyone is making this so complicated. This is all I did.
if(!$(this).is(":checked")){ console.log("on"); }
Solution 17 - Javascript
get radio value by name
$('input').on('className', function(event){
console.log($(this).attr('name'));
if($(this).attr('name') == "worker")
{
resetAll();
}
});
Solution 18 - Javascript
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'/>
Solution 19 - Javascript
Try this:
let checkbox = document.getElementById('checkboxId');
if (checkbox.checked != true)
{
alert("select checkbox");
}
Solution 20 - Javascript
$("#person_IsCurrentAddressSame").change(function ()
{
debugger
if ($("#person_IsCurrentAddressSame").checked) {
debugger
}
else {
}
})