如何在复选框未选中时显示JavaScript确认框，然后如果用户选择取消，则保持复选框选中？

Question

我有一个小的HTML表单，里面有三个复选框，每行一个。我希望当用户取消选中一个复选框时，可以显示一个JavaScript确认框，如果用户选择取消，则该复选框仍然被选中。我在这个网站和其他一些网站上搜索过，但几乎所有的内容都与复选框被选中有关，比如说如果他们必须同意某些条款之类的内容。我非常新于JavaScript，但我尝试根据自己的想法创建了一个函数，但它不起作用。

这是我的表单：

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

这是我尝试过的函数，但它并不能正常工作:

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，那也没问题。谢谢。

- Andrew Fox

Answer 1

试试这个方法。

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

      }
    }

Demo Using element name

- Sibu

---

复选框应该分配id属性。 - New Developer

@NewDeveloper，是的，我在演示链接中有这个问题，不过我已经在这里发布了代码...感谢你指出。 - Sibu

这太完美了！非常感谢！我希望我能给你+2分，因为你非常细致，并且提供了两个不同的答案，都使用了所要求的Javascript。非常感谢！非常感谢！！ - Andrew Fox

Answer 2

我会这样做：

你的表单：

<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)"></input>
      </td>
    </tr>
    <tr>
      <td>Checkbox Two</td>
      <td align="center">
        <input type="checkbox" name="check2" checked="checked" onchange="cTrig(this)"></input>
      </td>
    </tr>
    <tr>
      <td>Checkbox Three</td>
      <td align="center">
        <input type="checkbox" name="check3" checked="checked" onchange="cTrig(this)"></input>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2">
        <input type="submit" name="submit" value="submit"></input>
      </td>
    </tr>
  </table>
</form>

JavaScript：

function cTrig(box) {
  if (!box.checked) {
    if (!confirm("Are you sure you want to do this?")) {
        box.checked = true;
    }
  }
}

- nisovin

---

我该如何修改这个程序，以便显示一个带有确认按钮的 div？ - haashe

Answer 3

使用jQuery（因为它更好），但如果需要，我也可以不用它：

$('#check1').change(function(){
    if($("#check1").prop('checked') == false)
    {
        var i = window.confirm("Sure?");
        if(i == true)
        {
            $("#check1").prop('checked', false);
        }
        else
        {
            $("#check1").prop('checked', true);
        }
    }
});

此外，这也假设您正在为每个复选框分配一个id，这是必须的。在这种情况下，名称不起作用。

<input type="checkbox" id="check1" name="check1" checked="checked"></input>

http://jsfiddle.net/RbENV/10/

请注意，我使用了原生的方式来处理确认对话框，但是使用jQuery UI，您可以更好地控制该对话框。

编辑：添加了一个检查，以确保只在取消选中时发生。遗漏了这一部分。（请注意，您要检查false，因为当change事件触发时，变化已经发生）

- Taz

---

谢谢您的回复。虽然它运行得非常好，但我选择了@Sibu的答案，因为它是用Javascript编写的。 - Andrew Fox