Question

Good Afternoon Developer，这是我在asp .net中的内容，我希望用户只能选中2个复选框，超出该警告框应弹出。

 <body>
        <form id="form1" runat="server">
        <div>
            <table width="100%">
                <tr>
                    <td>
                    <asp:CheckBox id="q3a" runat="server" Text="Public" />
                    </td>
                    <td>
                    <asp:CheckBox id="q3b" runat="server" Text="void" />
                    </td>
                    <td>
                    <asp:CheckBox id="q3c" runat="server" Text="protected"/>
                    </td>
                    <td>
                    <asp:CheckBox id="q3d" runat="server" Text="return" />
                    </td>
                </tr>
            </table>
            <asp:Button ID="btnSubmit" Text="submit" runat="server"/>
        </div>
        </form>
    </body>

我怎么能为此写javascript，我试过但找不到任何出路，请帮忙......

Answer 1

你可以使用JQuery：

$("input[type='checkbox']").change(function () {

        var n = $("input:checkbox:checked").length;
        if (n > 2) {
            alert('2 are already selected!');
            $(this).attr("checked", false);
        }
    });

如果您真的想使用JavaScript，请尝试以下功能：

function checkCondition(chkbox) {
    var buttonGroup = document.getElementsByName("group");
    var total = 0;
    for (var i = 0; i < buttonGroup.length; i++) {
        if (buttonGroup[i].checked) {
            total++;
        }
    }
    if (total > 2) {
        alert('2 are already selected!');
        chkbox.checked =false;
    }
}

并在您的复选框上设置onclick="checkCondition(this)"并将name属性设置为group值，例如

Answer 2

您应该在用户尝试的时候停止用户并选择第三个选项，这样只能提交两个选中的值并避免服务器端验证。

客户端onchange事件应该连接到类似于此的函数;

function validationCheck(checkbox) {
  if(checkbox.checked) {
    var count = 0;

    count += document.getElementById('q3a').checked ? 1 : 0;
    count += document.getElementById('q3b').checked ? 1 : 0;
    count += document.getElementById('q3c').checked ? 1 : 0;
    count += document.getElementById('q3d').checked ? 1 : 0;

    if(count > 2) {
      alert('You may only select two options.');
      checkbox.checked = false;
    }
  }
}

输入应使用onchange="validationCheck(this);"呈现。

Answer 3

您可以jQuery使用find all selected checkboxes：

var count = $("input:checked").length;

然后你就拥有了你所需要的一切。

但我建议使用内置ASP.NET-Validator Controls。您可以将CustomValidator用于此目的，这也可以在客户端使用适当的ClientValidationFunction。

Answer 4

您可以为复选框添加客户端onclick事件，并使用jQuery检查是否选中了复选框。您可以使用一个应该测量阈值的计数器，然后在超过的情况下弹出消息。

$('.mycheckbox').click(function(){
 var count =   $("input:checked").length;
}

注意：请为所有具有相同类名的复选框添加classname属性。

如何从4个CheckBox中检查任何2个复选框？

4 个答案: