Question

这是我的单选按钮：

<label class="col-sm-2 form-control-label">Type</label>
                <div class="col-sm-2">
                    <label class="container">
                        Reward
                        <input name="IsReward" type="radio" asp-for="IsReward" value="True" class="sb-isReward">
                        <span class="checkmark"></span>
                    </label>
                    <span asp-validation-for="IsReward" class="text-danger"></span>
                </div>
                <div class="col-sm-2">
                    <label class="container">
                        Fine
                        <input name="IsReward" type="radio" asp-for="IsReward" value="False" >
                        <span class="checkmark"></span>
                    </label>

                </div>

我想在单击“奖励”或“罚款”选项时显示或隐藏的文本框：

                <div class="col-sm-4">
                    <input type="text" asp-for="CostReward" class="form-control sb-digit sb-isRewardTypeDiv">
                    <span asp-validation-for="CostReward" class="text-danger"></span>
                </div>

，最后是我无法使用的jQuery代码：

$('.sb-isGuilty').on('change', function () {
if (this.checked) {
    $('.sb-isGuiltyTypeDiv').show();
} else {
    $('.sb-isGuiltyTypeDiv').hide();
}
}).trigger('change');

Answer 1

您遇到此问题的原因是您的活动始终在侦听单选按钮上的更改。然后，当您选择一个新的单选按钮时，事件将在该单选按钮上触发。

所以让我们更深入地了解一下。

if (this.checked) {
    $('.sb-isGuiltyTypeDiv').show();
} else {
    $('.sb-isGuiltyTypeDiv').hide();
}

每次选择单选按钮时，都会执行上述代码。但是，一旦选中它，它总是被选中，因此为什么单选按钮总是显示，所以它永远不会碰到if块的错误部分。

尝试将控制台日志放在if语句上方。 console.log(this.checked)并检查输出，您会发现它总是正确的。

您应该做的是查看选定的单选按钮的值，例如下面的代码块。

$('.sb-isReward').on('change', function (e) {

if (e.target.value === "True") {

    $('.sb-isRewardTypeDiv').show();
} else {

    $('.sb-isRewardTypeDiv').hide();
}
}).trigger('change');

我还注意到您对元素的选择器是错误的。不知道这是否是故意的，但我也在代码中进行了更改。

这是一个工作示例的代码笔：https://codepen.io/anon/pen/gNYYjL

希望这会有所帮助。

在剃须刀页面中选中/取消选中单选按钮时，如何隐藏和显示文本框？

1 个答案: