0

我有以下代码，其中显示了姓名、姓氏、复选框和文本框：-

        <td>
        @for (var i = 0; i < Model.checkBoxListTeamA.Count();i++ )
        {
            <div class="ScorerCheckboxList">
                @Html.HiddenFor(it => it.checkBoxListTeamA[i].PlayerId)
                @Html.Label(Model.checkBoxListTeamA[i].PlayerName)
                @Html.Label(Model.checkBoxListTeamA[i].PlayerSurname)
                @Html.CheckBoxFor(it => it.checkBoxListTeamA[i].Checked, new { id="CheckBoxA" })
                @Html.TextBoxFor(it => it.checkBoxListTeamA[i].NoOfGoals, new { id="TextBoxA",     style="width:20px;" })
            </div>
            <br/>
        }
    </td>

我也有以下 Jquery 脚本：-

<script type='text/javascript'>
$(document).ready(function () {
        ShowHideTextBox();
        $('#CheckBoxA').click(function (event) {
            alert('clicked');
            ShowHideTextBox();
    });
});

function ShowHideTextBox() {
    if ($('#CheckBoxA').is(':checked')) {
            $('#TextBoxA').attr('visible', true);
        }
        else {
            $('#TextBoxA').removeAttr('visible');
        }
   }
</script>

但是我没有实现我想要的，即当用户单击一个复选框时，我想显示文本框，如果未选中该复选框，那么我想隐藏该复选框。

我的脚本有什么问题？选中复选框时，我什至没有点击！

感谢您的帮助和时间

----------------更新JQUERY--------------------------

<script type='text/javascript'>
$(document).ready(function () {
        ShowHideTextBox();
});

function ShowHideTextBox() {
    $('.ScorerCheckboxList :checkbox').click(function () {
        alert('Checked!');
        $(this).siblings('input[type="text"]').toggle(this.checked);
    });
}
</script>
4

2 回答 2

1

你有几个问题。

首先，没有visible属性。尝试toggle(bool)改用，其中bool是否应显示元素。

其次，您有一个for生成输出的循环，这意味着您最终会得到具有相同 id 的多个元素，这违反了规则。将其更改为类似id="CheckBoxA"+i.

第三，您的 jQuery 在更改 id 后将无法工作，并且会影响比您预期更多的元素。尝试这样的事情：

$('.ScorerCheckboxList :checkbox').click(function() {
    $(this).siblings('input[type="text"]').toggle(this.checked);
});

编辑 - 完整的javascript：

$(document).ready(function() {
    $('.ScorerCheckboxList :checkbox').click(function() { ShowHideTextBox(this); })
        .each(function() { ShowHideTextBox(this); });
});

function ShowHideTextBox(elem) {
    $(elem).siblings('input[type="text"]').toggle(elem.checked);
}
于 2013-08-28T19:08:23.253 回答
0

尝试：

function ShowHideTextBox() {
    if ($('#CheckBoxA').is(':checked')) {
        $('#TextBoxA').show();
    }
    else {
        $('#TextBoxA').hide();
    }
}
于 2013-08-28T19:07:33.240 回答