如果复选框未选中则显示Javascript确认框，然后如果用户选择取消选中复选框？ [英] How to show Javascript confirm box when checkbox is unchecked and then if user selects cancel, leave the checkbox checked?

问题描述

我有一个小的 html表单有三个复选框，每个行中有一个。我想有一个 javascript确认框显示，当用户取消选中该框，然后如果用户选择取消，复选框保持检查。我搜索了这个网站和一些其他人，但几乎一切都是与复选框被检查，如果他们不得不同意某些条款或某事。我非常新的 Javascript 然而我试图做一个基于我应该看起来像一个函数，但它不工作。

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.

这是我的表单：

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

这里是 jsfiddle

我喜欢 Javascript ，因为我想在进入 jquery 之前更熟悉该语言，但如果它必须在 jquery ，那就很好。干杯。

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.

推荐答案

尝试这种方式

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

使用元素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;

      }
    }

工作演示

使用名称

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;

      }
    }

演示使用元素名称

这篇关于如果复选框未选中则显示Javascript确认框，然后如果用户选择取消选中复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！