Question

我有多个复选框，点击按钮我需要验证以下案例

检查是否选中了所有复选框，如果不是全部
检查是否未选中任何复选框并将其突出显示
如果选择了所有选项，请转到下一页。

代码在ASP.NET MVC 3中，我正在使用jquery。

<table>
<tr>
<td>
<span id="errorMsg1"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus1", name = "cbCheckedStatus" })
</td>
<td>Message1</td>
<tr>
tr>
<td>
<span id="errorMsg2"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus2", name = "cbCheckedStatus" })
</td>
<td>Message2</td>
<tr>
tr>
<td>
<span id="errorMsg3"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus3", name = "cbCheckedStatus" })
</td>
<td>Message3</td>
<tr>
tr>
<td>
<span id="errorMsg4"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus4", name = "cbCheckedStatus" })
</td>
<td>Message4</td>
<tr>
tr>
<td>
<span id="errorMsg5"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus5", name = "cbCheckedStatus" })
</td>
<td>Message5</td>
<tr>
tr>
<td>
<span id="errorMsg6"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus6", name = "cbCheckedStatus" })
</td>
<td>Message6</td>
<tr>
tr>
<td>
<span id="errorMsg7"  style="display: none; color: red; font-size: 25px;">*</span>
@Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus7", name = "cbCheckedStatus" })
</td>
<td>Message7</td>
<tr>
</table>

我的Jquery在下面，

jQuery().ready(function domReady($) {
    $('#BtnAccept').click(function () {
    if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) {
            $('#cbCheckedStatus1').addClass("outLineRed");
            $('#cbCheckedStatus2').addClass("outLineRed");
            $('#cbCheckedStatus3').addClass("outLineRed");
            $('#cbCheckedStatus4').addClass("outLineRed");
            $('#cbCheckedStatus5').addClass("outLineRed");
            $('#cbCheckedStatus6').addClass("outLineRed");
            $('#cbCheckedStatus7').addClass("outLineRed");   
            $('#errorMsg1').show();
            $('#errorMsg2').show();
            $('#errorMsg3').show();
            $('#errorMsg4').show();
            $('#errorMsg5').show();
            $('#errorMsg6').show();
            $('#errorMsg7').show();                    
            $('#errorMsg').show();
            $('#spMsgError').show();
            $('#spMsgError').html("Please confirm all the items above, and place a check mark in every box.");
            $('#MsgSucc').attr("style", "background-color:White;");
            return false;
        }
        else if( write condition){
        //Find unchecked checkboxes and highlight it.
                 }
        else {
            $('#cbCheckedStatus1').addClass("outLineRed");
            $('#cbCheckedStatus2').addClass("outLineRed");
            $('#cbCheckedStatus3').addClass("outLineRed");
            $('#cbCheckedStatus4').addClass("outLineRed");
            $('#cbCheckedStatus5').addClass("outLineRed");
            $('#cbCheckedStatus6').addClass("outLineRed");
            $('#cbCheckedStatus7').addClass("outLineRed"); 
            $('#errorMsg1').hide();
            $('#errorMsg2').hide();
            $('#errorMsg3').hide();
            $('#errorMsg4').hide();
            $('#errorMsg5').hide();
            $('#errorMsg6').hide();
            $('#errorMsg7').hide();                   

            $('#errorMsg').hide();
            $('#spMsgError').hide();
            $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
        }

到目前为止我有什么

检查是否选中了所有复选框，如果没有选中全部 - 已完成
检查是否未选中任何复选框，仅突出显示未选中的复选框 - 在此处挣扎。

任何人都可以阐明如何进行第2点。

Answer 1

尝试$('input[type=checkbox]:not(:checked)').addClass("outLineRed");

$('input:checkbox:not(:checked)').addClass("outLineRed");也是可能的，但根据jQuery documentaion相当于input[type=checkbox]。

Answer 2

试试这个：你已经有未经检查的输入框的jquery选择器，你用它来获取所有复选框的长度并将其与未经检查的复选框长度进行比较：

if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) {

您可以使用以下相同的内容：

$('input[type=checkbox]:not(:checked)').addClass("outLineRed");

找到所有未选中的复选框，并在jquery中单击按钮时仅突出显示未选中的复选框

2 个答案: