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

Question

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

例如：

在第一个标签中，第一个td具有跨度标签，第二个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：

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;");
        }       
    });    
});

Answer 2

可以使用toggle来代替slideToggle。 在IE10中，slideToggle有时会异常工作。

$('#spBlueCheckbox').slideToggle(this.checked);

代替上面的一种用法

$('#spBlueCheckbox').toggle(this.checked);

Answer 3

您只需要使用jQuery Tree Traversal方法来找到相关的span 。

您可以调整下面的代码以适应您的目的，但想法将保持不变：

$(function () {
    $('input[type="checkbox"]').on('click', function () {
        $(this).parents('tr').find('span').slideToggle(this.checked); 
    });
});

请注意，您要嵌套两个document ready事件处理程序，因此也要进行整理。

演示

jQuery Tree Traversal文档