Andrew Fox Andrew Fox - 5 months ago 10
HTML Question

How to show Javascript confirm box when checkbox is unchecked and then if user selects cancel, leave the checkbox checked?

I have a small

html form
with three checkboxes, one in each
row
. I want to have a
javascript confirm box
show when the user unchecks the box, and then if the user selects cancel, the
checkbox
remains checked. I've searched this site and a few others but almost everything was to do with the
checkbox
being checked, like if they had to agree to some terms or something. I am very new to
Javascript
however I tried to make a function based on what I though it should look like, but it doesn't work.

Here is my form:

<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>


And here is the function I tried, but doesn't work:

function cTrig(name) {
if (name.checked == true) {
confirm("Are you sure you want to do this?");
return true;
} else {
return false;
}
}


Here is a jsfiddle

I would prefer something in
Javascript
as I want to become more familiar with that language before getting into
jquery
, but if it has to be done in
jquery
, then that is fine. Cheers.

Answer

Try This Way

<form action="" method="post">
  <table id="table">
    <tr>
      <td>Checkbox One</td>
      <td align="center">
        <input type="checkbox" name ="check1" id="check1" checked='checked' onchange="cTrig('check1')"></input>
      </td>
    </tr>
    <tr>
      <td>Checkbox Two</td>
      <td align="center">
        <input type="checkbox" name="check2" id="check2" checked='checked' onchange="cTrig('check2')"></input>
      </td>
    </tr>
    <tr>
      <td>Checkbox Three</td>
      <td align="center">
        <input type="checkbox" id="check3" name="check3" checked='checked' onchange="cTrig('check3')"></input>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2">
        <input type="submit" name="submit" value="submit"></input>
      </td>
    </tr>
  </table>
</form>

By Using Element Id

function cTrig(clickedid) { 
      if (document.getElementById(clickedid).checked == true) {
        return false;
      } else {
       var box= confirm("Are you sure you want to do this?");
        if (box==true)
            return true;
        else
           document.getElementById(clickedid).checked = true;

      }
    }

Working Demo

By Using Name

function cTrig(clickedid) { 
      if (document.getElementsByName(clickedid)[0].checked == true) {
        return false;
      } else {
       var box= confirm("Are you sure you want to do this?");
        if (box==true)
            return true;
        else
           document.getElementsByName(clickedid)[0].checked = true;

      }
    }

Demo Using element name