Question

我有一个以DB为单位填充的CheckBoxList。

<asp:CheckBoxList ID="chklist1" runat="server" onclick="chklist1_onclick()" />

Oce已被填充我有几个选项，其中一个有“无响应”文本。

我想要的是一个执行以下操作的javascript函数：

1）如果我选中“无响应”，则必须取消选中所有其他选项。

2）如果我检查至少一个不是“无响应”的选项，则必须取消选中“无响应”选项。

希望明确。提前谢谢。

我的尝试是：

    function chklist1_onclick() {
    var chklist1 = document.getElementById('<%= chklist1.ClientID %>');
    var chkList = chklist1.getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        if (chkList[i].checked && chkList[i].value == "6") {
            for (var i = 0; i < chkList.length; i++) {
                if (chkList[i].checked && chkList[i].value != "6") {
                    chkList[i].checked = false;

                }
            }
        }
    }
}

其中6是“无响应”项的值。但这样我只能解决案例1）

Answer 1

假设No Response复选框有value=""，您可以尝试以下脚本：

<script type="text/javascript">
    window.onload = function () {
        var noResponseCheckBoxFilter = function(item) {
            return item.value == '';
        };
        var otherCheckboxesFilter = function(item) {
            return !noResponseCheckBoxFilter(item);
        };

        var childInputs = document.getElementById('<%= chklist1.ClientID %>').getElementsByTagName('input');
        var checkboxes = Array.prototype.slice.call(childInputs, 0).filter(function (item) {
            return item.type == 'checkbox';
        });
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].onclick = function () {
                if (this.value == '') {
                    if (this.checked) {
                        // uncheck the other checkboxes
                        var otherCheckboxes = checkboxes.filter(otherCheckboxesFilter);
                        for (var j = 0; j < otherCheckboxes.length; j++) {
                            otherCheckboxes[j].checked = false;
                        }
                    }
                } else {
                    // uncheck the No Response checkbox
                    checkboxes.filter(noResponseCheckBoxFilter)[0].checked = false;
                }
            };
        }
    };
</script>

如果“无响应”复选框的值与空字符串不同，则只需调整上一个示例中的测试。

Answer 2

Darin解决方案的略微修改版本，我认为这个版本与IE8兼容。

var checkBoxList = document.getElementById('<%= chklist1.ClientID %>');
var checkboxes = checkBoxList.querySelectorAll('input[type=checkbox]');
var nonecheckbox = checkBoxList.querySelectorAll("input[value='6']")[0];
var i, j;
for (i = 0; i < checkboxes.length; ++i) {
     checkboxes[i].onclick = function () {
         if (this.value == '6' && this.checked) {
             // uncheck the other checkboxes
             for (j = 0; j < checkboxes.length; ++j) {
                 if (checkboxes[j].value != '6') {
                     checkboxes[j].checked = false;
                 }
             }
         } else {
             // uncheck the No Response checkbox
             nonecheckbox.checked = false;
         }
    };
}

Answer 3

我用以下代码解决了：

 window.onload = function () {
    var chklist1 = document.getElementById('<%= chklist1.ClientID %>');
    var chkList = chklist1.getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        chkList[i].onclick = function () {

            if (this.checked) {
                if (this.value == "6") {
                    for (var i = 0; i < chkList.length; i++) {
                        if (chkList[i].value != "6") {
                            chkList[i].checked = false;
                        }
                    }
                }
                else {
                    for (var i = 0; i < chkList.length; i++) {
                        if (chkList[i].value == "6") {
                            chkList[i].checked = false;
                        }
                    }
                }
            }

        };
    }
};

并删除了asp标记中的onclick事件。

Javascript＆amp; ASP.NET - 管理CheckBoxList

3 个答案: