如何使用 javascript 显示警报消息以选中复选框？答案

【问题标题】：How to show alert message using javascript to check checkbox?如何使用 javascript 显示警报消息以选中复选框？
【发布时间】：2013-07-04 16:22:47
【问题描述】：

我正在使用以下代码来检测我的 gridview 模板字段中的复选框是否被选中。如果没有选中任何复选框，那么我想显示警报消息。

   function findCheckBox() {

        var inputElements = document.getElementsByTagName('input');
        var chekSelect = false;
        for (var i = 0; i < inputElements.length; i++) {
            var myElement = inputElements[i];


            if (myElement.type === "checkbox") {

                if (myElement.checked === false) {

                    chekSelect = true;
                    return true;
                }
            }

            if (chekSelect === true) {
                return true;
            }

            else {
                alert('Please Check Atleast one record to print cheque!!!');
                return false;
            }
        }  

    }

但是，当我点击我的按钮时，即使选中了一个或多个复选框，它也会向我显示一次错误消息。我在这里做错了什么。谁能帮帮我。

【问题讨论】：

很抱歉，我不知道 Jquery..你能告诉我如何使用它吗？

标签： javascript

【解决方案1】：

你的逻辑有点不对劲。更正版本：

jsFiddle demo

function findCheckBox() {
    var inputElements = document.getElementsByTagName('input');
    var chekSelect = false;
    for (var i = 0; i < inputElements.length; i++) {
        var myElement = inputElements[i];

        if (myElement.type === "checkbox") {
            if (myElement.checked) {
                chekSelect = true;
                break;
            }
        }
    }

    if(!chekSelect) {
        alert('Please Check Atleast one record to print cheque!!!');
        return false;
    } else {
        return true;
    }
}

我更改了.checked 测试，以测试它是true 而不是false，因为您想知道是否至少选中了一个复选框。我还添加了一个中断，并将警报移到了 for 之外，因为在 for 完成之前你不会知道是否有一个复选框被选中。

【讨论】：

【解决方案2】：

试试这个

function findCheckBox() {
    var inputElements = document.getElementsByTagName('input');
    for (var i = 0; i < inputElements.length; i++) {
        var myElement = inputElements[i];
        if (myElement.type === "checkbox" && myElement.checked) {
            return true;
        }
    }
    alert('Please Check Atleast one record to print cheque!!!');
    return false;
}

【讨论】：

【解决方案3】：

使用 JQuery：

var checked = false;
$('input:checkbox').each(function(){
    if($(this).prop('checked')){
        checked = true;
        break;
    }
});

if(!checked) alert('Please Check At least one record to print cheque!!!')

【讨论】：

这可以简化为if(!$('input[type=checkbox]:checked').length) alert('...');。