javascript - 使用 jquery 根据选中或未选中的复选框显示跨度标签

Question

我在 ASP.NET MVC3 中有以下 View 页面，基于复选框选择，我需要显示关联的 span 标签。

例如:

在第一个标签中，第一个 td 有 span 标签，第二个 td 有复选框，第三个 td 有一些消息。
如果选中该复选框，则隐藏第一个 td 中的跨度标签。
如果未选中该复选框，则显示跨度标记。
我需要显示特定于特定复选框的跨度标记已选中或未选中。

示例:
如果选中第一个复选框，则隐藏第一个中的跨度标签
如果未选中第二个复选框，则显示位于同一第二个中的 span 标记

现在我想知道我该怎么做，显示基于复选框选择的 span 标签，任何人都可以帮助我。

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

我的 jQuery:

jQuery.ready(function domReady($) {
    jQuery(function ($) {
        $('#cbCheckedStatus7').on('change', function () {
            $('#spBlueCheckbox').slideToggle(this.checked);
        });
    });
    $('#BtnAccept').click(function () {
        if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) {
            alert('All are not checked')
            $('input:checkbox:not(:checked)').addClass("outLineRed");
            $('.errorMessage').show();
            $('#errorMsg').show();
            $('#spMsgError').show();
            $('#spMsgError').html("Please confirm all the items above, and place a check mark in every confirmation box.");
            $('#MsgSucc').attr("style", "background-color:White;");
            return false;
        }
        else if ($('input:checkbox').length != $('input:checkbox:checked').length) {
            alert('few boxes not checked');

     //show only span tag whose checkboxes are not checked

            $('input:checkbox:not(:checked)').addClass("outLineRed");
            $('input:checkbox:checked').removeClass("outLineRed");
            return false;
        }
        else {
            alert('all are checked')
            $('input:checkbox:checked').removeClass("outLineRed");
            $('.errorMessage').hide();
            $('#spMsgError').hide();
            $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
        }
    });
});

Answer 1

根据 MelanciaUK 的回答，我发布了这个回答，对问题点稍作修改，它按预期工作。它将帮助其他人。

jQuery().ready(function domReady($) {    
    jQuery(function ($) {
        $('#cbCheckedStatus7').on('change', function () {            
            $('#spBlueCheckbox').slideToggle(this.checked);
        });
    });   
    $('#BtnAccept').click(function () {
        if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) {            
            $('input:checkbox:not(:checked)').addClass("outLineRed");           
            $('.errorMessage').show();           
            $('#spMsgError').show();
            $('#spMsgError').html("Please confirm all the items above, and place a check mark in every confirmation box.");
            $('#MsgSucc').attr("style", "background-color:White;");
            return false;
        }
        else if ($('input:checkbox').length != $('input:checkbox:checked').length) { 
            $('input:checkbox:not(:checked)').each(function () {
                $(this).parents('tr').find('span.errorMessage').show(!this.checked);               
            });
            $('input:checkbox:checked').each(function () {
                $(this).parents('tr').find('span.errorMessage').hide(this.checked);              
            });
            $('input:checkbox:not(:checked)').addClass("outLineRed");
            $('input:checkbox:checked').removeClass("outLineRed");            
            return false;
        }
        else {            
            $('input:checkbox:checked').removeClass("outLineRed");
            $('.errorMessage').hide();           
            $('#spMsgError').hide();
            $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
        }       
    });    
});