I am trying to make it so that if the checkbox on our page is checked it will display an alert message notifying the user they have opted in to showing their checkout history. If the user deselects the check box then it should show another alert box letting them know they are opting out of showing their checkout history. I am having trouble just displaying alert boxes if the check box is even checked/unchecked. Here is my code.
HTML
<div class="myAccountCheckboxHolder" id="showCheckoutHistoryCheckbox">
<input tabindex="40" checked="checked" id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox">
<label for="showCheckoutHistory" class="checkLabel">Show my checkout history</label>
</div>
Javascript
function validate() {
var checkoutHistory = document.getElementById('showCheckoutHistory');
if (checkoutHistory.checked) {
alert("You have elected to show your checkout history.");
} else {
alert("You have elected to turn off checkout history.");
}
Thank you.
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.
To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);
jQuery (original answer)
jQuery(document).ready(function() {
jQuery('#showCheckoutHistory').change(function() {
if ($(this).prop('checked')) {
alert("You have elected to show your checkout history."); //checked
}
else {
alert("You have elected to turn off checkout history."); //not checked
}
});
});
Documentation here: http://api.jquery.com/prop/
JavaScript (2018 update)
It is worth to notice, that you don't need any javascript libraries to acomplish that.
// Check current state and save it to "checked" variable
var checked = document.getElementById("showCheckoutHistory").checked;
// Set state manually (change actual state)
document.getElementById("showCheckoutHistory").checked = true; // or
document.getElementById("showCheckoutHistory").checked = false;
For more pure javascript solutions I recommend vanilla.js: http://vanilla-js.com/ framework ;)
So for checkbox changes I use the change
listener that jQuery provides. So make your javascript this:
$("#showCheckoutHistory").change(function(event){
if (this.checked){
alert("You have elected to show your checkout history.");
} else {
alert("You have elected to turn off checkout history.");
}
});
Here it is as a working fiddle.
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