Question

我在ASP.NET MVC3中有以下视图页面，根据复选框选择，我需要显示相关的span标记。

实施例

在第一个标签中，第一个td有span标签，第二个td有复选框，第三个td有一些信息如果选中该复选框，则隐藏第1个td中的span标记如果取消选中该复选框，则显示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

您可以使用切换来代替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事件处理程序，因此也要将其整理出来。

Demo

jQuery Tree Traversal documentation

使用jquery显示基于复选框选中或取消选中的范围标记

3 个答案: