复选框上的事件监听器应该给用户一个提示答案

【问题标题】：Eventlistner on Checkbox should give user a prompt复选框上的事件监听器应该给用户一个提示
【发布时间】：2014-01-02 10:20:56
【问题描述】：

我在网页上有一个复选框，我希望当复选框打勾时，提示应带有“消息和是\ no Button”。单击“是”应将用户带到下一个网站，单击“否”则关闭提示。

如何使用 Javascript 来做到这一点。程序如何知道复选框是否被选中？我使用 addeventlistner 阅读，但我不知道如何使用它。有人可以分享一个例子。

【问题讨论】：

标签： javascript html prompt

【解决方案1】：

可以使用addEventListener绑定事件

document.getElementById('testcb').addEventListener('change', function () {
    if (this.checked) {
        if (confirm('Really Take me to new loaction?')) {
            alert("Take me to new loaction");
            //window.location.href = newURL;
        }
    }
}, false);

DEMO

【讨论】：

【解决方案2】：

我会推荐使用一个库，比如 jQuery，你可以这样做

HTML：

<input type="checkbox" name="testcb" id="testcb" />

JavaScript：

$(function() {
    $('#testcb').click(function() {
        if (this.checked) {
           if (confirm('Really?'))
               window.location.href = newURL;
        }
    });
});

小心addEventListener：它不适用于IE 8及以下版本，并且'change'事件在同一浏览器（IE8-）中有错误（http://www.quirksmode.org/dom/events/change.html）

【讨论】：

【解决方案3】：

在复选框事件上添加 JavaScript 函数，

HTML
<input id="chk" onclick="doSomething()"  type="checkbox">


javascript function : 


function doSomething()
{
  var x = document.getElementById("chk").checked;
  if (x)
  { var conf = confirm("checkbox is checked, proceed ?");
   if (conf == true) {
   window.location = "http://www.google.com";
  }
 }
}

不要忘记添加 jQuery 的引用（您可以从 googleAPI 添加）

【讨论】：