如何在Razor页面中通过单选按钮切换显示/隐藏文本框？

首先我看到你代码里的jQuery无法工作主要是类名不匹配，还有对单选按钮组的事件处理逻辑需要调整，下面一步步来修正：

1. 修正类名匹配问题 #

你的单选按钮类是sb-isReward，文本框类是sb-isRewardTypeDiv，但原来的jQuery代码里错误使用了sb-isGuilty和sb-isGuiltyTypeDiv，类名完全不对应，这是核心问题之一！

2. 调整单选按钮组的事件处理逻辑 #

因为是单选按钮组，我们需要监听整个组的change事件，然后根据选中的单选按钮的值来判断是否显示文本框：

修正后的jQuery代码 #

// 监听所有sb-isReward类的单选按钮的change事件
$('.sb-isReward').on('change', function () {
    // 获取当前选中的单选按钮值，判断是否为Reward选项
    let isRewardSelected = $('input[name="IsReward"]:checked').val() === 'True';
    // 用toggle简化显示/隐藏逻辑，传入布尔值控制状态
    $('.sb-isRewardTypeDiv').toggle(isRewardSelected);
}).trigger('change'); // 页面加载时触发一次，确保初始状态与默认选中项一致

3. 补充细节优化 #

• 给第二个单选按钮（Fine选项）也加上sb-isReward类，这样整个组的单选按钮都会被监听，切换任何选项时都能触发事件；
• 使用toggle()方法替代if-else判断，让代码更简洁；
• 页面初始化时触发trigger('change')，避免页面加载时文本框状态和单选按钮默认选中状态不一致。

完整整合示例 #

把修正后的代码和你的Razor页面代码结合，示例如下：

<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" class="sb-isReward"> <!-- 新增sb-isReward类 -->
        <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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.sb-isReward').on('change', function () {
        let isRewardSelected = $('input[name="IsReward"]:checked').val() === 'True';
        $('.sb-isRewardTypeDiv').toggle(isRewardSelected);
    }).trigger('change');
});
</script>

内容的提问来源于stack exchange，提问作者Ladi Ora