如何使用 Javascript 根据是否选中复选框显示警告框

Question

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.

Answer 1

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

Answer 2

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 .

Answer 3

Here's a working version without jQuery. Actually your code worked pretty well once the function had a closing brace. I just added in an event listener for you and moved the checkoutHistory var outside the function.

var checkoutHistory = document.getElementById('showCheckoutHistory');
checkoutHistory.onchange = function() {
    console.log(checkoutHistory);
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
}

And here's the JSFiddle I used. http://jsfiddle.net/aaFe5/

Answer 4

$(document).ready(function(){
  $("input:checkbox").change(function(){

    var dynamicId = this.id;

    let checkBoxtoggle = $("#"+this.id)[0].checked;

    if(checkBoxtoggle!==false){
      alert("done");
    }else{
      alert("not");
    }
  });
});