如何用jQuery实现点击Yes后再点No时隐藏指定表单字段

当然可以实现，问题出在你的代码仅给「Yes」单选框绑定了change事件——当用户点击「No」时，没有触发更新输入框状态的逻辑，导致输入框无法隐藏。

修改后的代码 #

JavaScript 部分

$(document).ready(function() {
    var policeDetailsGroup = $('#policeDetailsGroup');
    var policeDetails = $('#policeDetails');

    function updatePoliceDetailsField() {
        // 获取当前选中的单选框值
        var selectedOption = $('input[name="policeInvolved"]:checked').val();
        // 判断是否需要显示输入字段
        var shouldShowField = selectedOption === 'yes';

        // 切换输入字段的显示状态
        policeDetailsGroup.toggle(shouldShowField);
        // 同步设置必填属性
        policeDetails.prop('required', shouldShowField);
    }

    // 给整个单选组绑定change事件，而非仅监听Yes选项
    $('input[name="policeInvolved"]').on('change', updatePoliceDetailsField);
    // 页面加载时初始化字段状态
    updatePoliceDetailsField();
});

HTML 部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="form-group">
    <label>Were Police/Emergency Services involved?</label>
    <div class="radio">
        <label>
            <input type="radio" name="policeInvolved" value="yes"> Yes
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="policeInvolved" value="no"> No
        </label>
    </div>
</div>

<div id="policeDetailsGroup" style="display: none;">
    <label for="policeDetails">If yes, please specify:</label>
    <input type="text" class="form-control" id="policeDetails" name="policeDetails" placeholder="Enter details">
</div>

修改说明 #

1. 事件绑定范围调整：将原来仅绑定「Yes」单选框的change事件，改为绑定整个name="policeInvolved"单选组。这样无论是点击「Yes」还是「No」，都会触发状态更新函数。
2. 逻辑简化：通过$('input[name="policeInvolved"]:checked').val()直接获取选中值，判断是否显示输入字段，代码更直观。
3. 状态同步：使用toggle()方法一键切换显示/隐藏状态，同时同步设置输入框的required属性，保证表单验证逻辑正确。

修改后，点击「Yes」会显示输入框并标记为必填，点击「No」则隐藏输入框并移除必填限制，完全符合需求。

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