使用jquery显示基于复选框选中或未选中的span标签

我有下面的ASP视图页面。净MVC3,根据复选框的选择，我需要显示相关的span标签。

,

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

如果选中了第一个复选框，则隐藏位于同一个
中的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.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;");
        }
    });
});