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

这是我的单选按钮：

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

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

---

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

让我们更深入地看一看

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

每次选择单选按钮时，都会执行上述代码。但是当它被选中时，它总是被选中，因此单选按钮总是显示，它永远不会命中if块的false部分

尝试在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');

我还注意到元素的选择器是错误的。不确定这是否是故意的，但我也在代码中更改了它

下面是一个工作示例的代码笔：

希望这有帮助