C# 隐藏/显示@Html.TextBoxFor

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

        <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>

@对于（var i=0；iit.checkBoxListTeamA[i].PlayerId）
@Label（Model.checkBoxListTeamA[i].PlayerName）
@Html.Label（Model.checkBoxListTeamA[i].PlayerSurname）
@Html.CheckBoxFor（it=>it.checkBoxListTeamA[i]。选中，新建{id=“CheckBoxA”}）
@Html.TextBoxFor（it=>it.checkBoxListTeamA[i].NoOfGoals，新的{id=“TextBoxA”，style=“width:20px；”）


}

我还有以下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>

$（文档）.ready（函数（）{
ShowHideTextBox（）；
$（'#CheckBoxA'）。单击（函数（事件）{
警报（“点击”）；
ShowHideTextBox（）；
});
});
函数ShowHideTextBox（）{
如果（$（'#CheckBoxA'）。是（':checked'））{
$（'TextBoxA'）.attr（'visible'，true）；
}
否则{
$（'#TextBoxA'）.removeAttr（'visible'）；
}
}

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

我的剧本怎么了？我甚至没有得到点击时，复选框被选中

谢谢你的帮助和时间

----------------更新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>

$（文档）.ready（函数（）{
ShowHideTextBox（）；
});
函数ShowHideTextBox（）{
$（'.ScorerCheckboxList:checkbox'）。单击（函数（）{
警报（'已检查！'）；
$（this.sides（'input[type=“text”]”）。切换（this.checked）；
});
}

试试：

---

你有几个问题

首先，没有可见的

属性。尝试改用
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);
}

Jason我已经更新了我的Jquery（更新的问题），但是它仍然不工作，我甚至没有得到点击事件
$(document).ready(function() {
    $('.ScorerCheckboxList :checkbox').click(function() { ShowHideTextBox(this); })
        .each(function() { ShowHideTextBox(this); });
});

function ShowHideTextBox(elem) {
    $(elem).siblings('input[type="text"]').toggle(elem.checked);
}