如何将文本框与单选按钮组关联并实现单选限制？

核心思路 #

• 给所有单选按钮设置相同的name属性，利用浏览器原生特性实现互斥选择
• 文本框默认隐藏，通过第四个单选按钮的选中状态控制其显示/隐藏
• 补充交互逻辑，确保文本框输入与单选按钮状态同步，避免出现多选冲突

步骤实现 #

1. 调整HTML结构 #

添加第四个单选按钮（对应需求中的“单选按钮4”），统一所有单选的name，并给文本框设置默认隐藏属性：

<div class="panel-group" id="accordion">
    <!-- 自定义输入面板（对应单选按钮4） -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <label>
                    <input type="radio" name="status" id="customRadio" value="custom">
                    自定义输入
                </label>
            </h4>
        </div>
        <div id="collapseCustom" class="panel-collapse collapse">
            <div class="panel-body">
                <input class="form-control input-lg text-left" name="customInput" id="customInput" type="text" hidden>
            </div>
        </div>
    </div>

    <!-- 原有单选选项 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <label>
                    <input type="radio" name="status" id="presentRadio" value="Present">
                    Present
                </label>
            </h4>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <label>
                    <input type="radio" name="status" id="absentRadio" value="Absent">
                    Absent
                </label>
            </h4>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <label>
                    <input type="radio" name="status" id="holidayRadio" value="Holiday">
                    Holiday
                </label>
            </h4>
        </div>
    </div>
</div>
<button type="button" id="submitBtn" class="btn btn-primary">提交</button>

2. 添加JavaScript交互逻辑 #

实现单选与文本框的关联控制，以及提交时的内容收集：

// 获取页面元素
const customRadio = document.getElementById('customRadio');
const customInput = document.getElementById('customInput');
const statusRadios = document.querySelectorAll('input[name="status"]');
const submitBtn = document.getElementById('submitBtn');

// 选中自定义单选时，显示文本框
customRadio.addEventListener('change', function() {
    customInput.hidden = !this.checked;
});

// 文本框输入内容时，自动选中自定义单选
customInput.addEventListener('input', function() {
    customRadio.checked = this.value.trim() !== '';
});

// 选中其他单选时，清空并隐藏文本框
statusRadios.forEach(radio => {
    if (radio.id !== 'customRadio') {
        radio.addEventListener('change', function() {
            customInput.value = '';
            customInput.hidden = true;
        });
    }
});

// 提交时收集有效内容
submitBtn.addEventListener('click', function() {
    let collectedValue = null;
    statusRadios.forEach(radio => {
        if (radio.checked) {
            collectedValue = radio.value === 'custom' 
                ? (customInput.value.trim() || '未输入自定义内容') 
                : radio.value;
        }
    });
    // 此处可替换为提交到后端的逻辑
    console.log('收集到的内容:', collectedValue);
    alert('收集到的内容: ' + collectedValue);
});

3. 关键说明 #

• 单选互斥：所有单选按钮name="status"，浏览器原生保证同一时间只能选中一个
• 显示控制：通过hidden属性切换文本框可见性，配合单选的change事件触发
• 状态同步：文本框输入时自动选中“自定义”单选，避免出现文本框有内容但单选未选中的冲突
• 提交逻辑：提交时优先判断单选状态，若选中“自定义”则取文本框值，确保最终只收集一项有效内容

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