下拉框栏位选择的时候，清空掉带出来的单选按钮栏位，再选择的时候没有值

Question

下拉框栏位选择的时候，清空掉带出来的单选按钮栏位，再选择的时候没有值
例：
栏位一（下拉框）：A/B
栏位二（单选按钮）：1/2/3
栏位三（复选框）：a/b/c
我在栏位一选A的时候 要显示栏位二、栏位三 去选择内容。
当切换到选B的时候，栏位二、栏位三 隐藏 选择的内容要清空掉并保持没有被选择的状态。

目前就是当我选完A 再切换到选B的时候。再去点击单选按钮， 选中了却获取不了单选按钮的值。

代码应该怎么实现啊。

Answer 1

基于Monster 组和GPT的调写：
（使用 jQuery）：

<!-- HTML 代码 -->
<select id="select">
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<div id="radio-group" style="display:none;">
  <label><input type="radio" name="radio" value="1">1</label>
  <label><input type="radio" name="radio" value="2">2</label>
  <label><input type="radio" name="radio" value="3">3</label>
</div>
<div id="checkbox-group" style="display:none;">
  <label><input type="checkbox" name="checkbox" value="a">a</label>
  <label><input type="checkbox" name="checkbox" value="b">b</label>
  <label><input type="checkbox" name="checkbox" value="c">c</label>
</div>

// JavaScript 代码
$(function() {
  // 监听下拉框的变化事件
  $('#select').on('change', function() {
    var selectedValue = $(this).val();
    if (selectedValue === 'A') {
      // 显示栏位二和栏位三
      $('#radio-group').show();
      $('#checkbox-group').show();
    } else if (selectedValue === 'B') {
      // 隐藏栏位二和栏位三，并清空它们的值
      $('#radio-group').hide().find('input').prop('checked', false);
      $('#checkbox-group').hide().find('input').prop('checked', false);
    }
  });
});