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.");
    }

谢谢。

Answer 1

jQuery（原始回答）

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/框架;）

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.");
    }
});

此处为a working fiddle。

Answer 3

这是一个没有jQuery的工作版本。实际上，一旦函数有一个右括号，你的代码就能很好地工作。我刚刚为你添加了一个事件监听器，并将checkoutHistory var移到了函数之外。

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/

如何根据是否使用Javascript选中复选框来显示警告框

3 个答案: