How do I call a script when a HTML checkbox is checked?

Question

I have the following code. When you click apple, a script should be called and an alert should pop up.. Why does this not work?

When you check apple, the script apple should be called!

<input type="checkbox" name="apple" id="apple" onclick ="apple()" />
<label for = "apple"> Apple ($.59) </label>

Answer 1

The problem is that the IDs and names of your elements are the same as global functions. Element IDs also become global variables that refer to the elements, and these are replacing the function definitions. Give the functions different names.

JS:

function appleAlert() {
    var selection = document.getElementById("apple");
    var total = 0;


    if (selection.checked) {
        total = 59;
        alert(total);
    } else {
        alert("Not checked");
    }

}

HTML:

<form name="shopping" action="#" method="post" onsubmit="return appleAlert()">
    <input type="checkbox" name="apple" id="apple" onclick="appleAlert()" />
    <label for="apple">Apple ($.59)</label>
    <input type="checkbox" name="orange" id="apple" onchange="orangeAlert()" />
    <label for="orange">Orange ($.49)</label>
    <input type="checkbox" name="banana" id="apple" onchange="bananaAlert()" />
    <label for="banana">Banana ($.39)</label>
    <input type="submit" value="Submit">
</form>

DEMO

Answer 2

<div class="col-sm-2 form-inline">
  <label class="switch">Service Type:</label>
</div>
<div class="col-sm-2 form-inline">
  <input type="checkbox" checked name="is_dispatching" value="1"  data- 
    toggle="toggle" data-style="ios" data-on="Dispatching" data-off="Agency">
  <input type="hidden" name="is_dispatching" value="0" data-toggle="toggle" data- 
    style="ios" data-on="Dispatching" data-off="Agency">
</div>

php:

$internal->is_dispatching = $_POST["is_dispatching"];