如何使用JavaScript根据复选框是否被选中来显示警报框

Question

我正在尝试实现以下功能：如果我们页面上的复选框被勾选，则会显示一个提示框，通知用户他们已选择显示其结账历史记录。如果用户取消选择该复选框，则应显示另一个提示框，让他们知道他们选择了不显示其结账历史记录。但是，我无法仅在复选框被勾选/取消勾选时显示警报框。以下是我的代码。

HTML

<div class="myAccountCheckboxHolder" id="showCheckoutHistoryCheckbox">
    <input tabindex="40" checked="checked" id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox">
        <label for="showCheckoutHistory" class="checkLabel">Show my checkout history</label>
    </div>    

Javascript

function validate() {
    var checkoutHistory = document.getElementById('showCheckoutHistory');
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }

谢谢。

- r.doleano

---

只需尝试使用checkbox.checked==true并尝试执行。 - Swapnil

看起来运行正常：http://jsfiddle.net/6Hct9/4/ - Naner

嘿，如果你的网站已经在使用jQuery，正如问题中的jQuery标签所建议的那样，你应该考虑使用@Jacek的答案，因为他的答案正确地使用了这个库。 - Scotty C.

可能是JavaScript检查复选框是否被选中的重复问题。 - Jacek Kowalewski

Answer 1

jQuery (original answer)

jQuery(document).ready(function() {
    jQuery('#showCheckoutHistory').change(function() {
        if ($(this).prop('checked')) {
            alert("You have elected to show your checkout history."); //checked
        }
        else {
            alert("You have elected to turn off checkout history."); //not checked
        }
    });
});

文档在这里：http://api.jquery.com/prop/

---

JavaScript（2018年更新）

值得注意的是，您不需要任何JavaScript库来实现此操作。

// Check current state and save it to "checked" variable
var checked = document.getElementById("showCheckoutHistory").checked; 

// Set state manually (change actual state)
document.getElementById("showCheckoutHistory").checked = true; // or
document.getElementById("showCheckoutHistory").checked = false;

如果需要更纯粹的JavaScript解决方案，我推荐vanilla.js: http://vanilla-js.com/ 框架 ;)

- Jacek Kowalewski

---

谢谢，这个完美地运行了。还要感谢您提供文档，这样我也可以学习您是如何做到的。 :) - r.doleano

没问题，我很自豪能够帮忙 :)。 - Jacek Kowalewski

Answer 2

因此，对于复选框的更改，我使用jQuery提供的change监听器。所以让你的javascript代码如下：

$("#showCheckoutHistory").change(function(event){
    if (this.checked){
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
});

这里是一个可工作的示例，链接在这里。

- Andy Novocin

---

这段代码应该放在document.ready函数内。而且我是第一个；）。但是你有“fiddle”……嗯：）。 - Jacek Kowalewski

可以假设代码已经正确地包装了。事实上，我更喜欢不指定：它可能在某个巨大的应用程序或仅适用于单个子页面的函数中。没有必要用不需要的细节混淆编程信息。如果看到你的帖子后，我会删除我的帖子，但我认为this.checked比$(this).prop("checked")更优雅，所以我把它留下来了。生命是短暂的。 - Andy Novocin

没问题。我给你点赞。 - Jacek Kowalewski

Answer 3

这里有一份无需jQuery的可工作版本。实际上，您的代码在函数加上闭合括号后就已经运行得很好了。我只是为您添加了一个事件监听器，并将checkoutHistory变量移到函数外部。

var checkoutHistory = document.getElementById('showCheckoutHistory');
checkoutHistory.onchange = function() {
    console.log(checkoutHistory);
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
}

以下是我使用的JSFiddle。 http://jsfiddle.net/aaFe5/

- Scotty C.

---

在某些情况下，您可能希望使用事件绑定方法而不是直接分配事件函数。这个页面解释得非常清楚，并介绍了不同浏览器之间的差异。 - Scotty C.

传递给 .ready() 的处理程序保证在 DOM 准备就绪后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。这里缺少 document.ready。我的答案更好，而且我是第一个 ;)。 - Jacek Kowalewski

@Jacek他没有使用jQuery，在我看来，为了一个事件监听器而包含整个库是不明智的。 - Scotty C.

哦，我没有看到jQuery标签。也许他正在使用它，如果是这样的话，你的代码更好，因为它实际上正在利用这个库。我会在原始问题中发表评论，建议他使用你的代码，如果他确实在使用jQuery。如果你是正确的，对不起把你的答案给否定了。:P - Scotty C.

没问题 :). 真正重要的是帮助别人，不管是谁 :). 最好的祝福 :). - Jacek Kowalewski

Answer 4

$(document).ready(function(){
  $("input:checkbox").change(function(){

    var dynamicId = this.id;

    let checkBoxtoggle = $("#"+this.id)[0].checked;

    if(checkBoxtoggle!==false){
      alert("done");
    }else{
      alert("not");
    }
  });
});

- Swati Chanana