单选按钮控制Div显示隐藏：点击前3个显示，最后一个隐藏

没问题，这个交互需求很容易实现，我给你准备了两种方案——原生JavaScript和jQuery的，你可以根据自己项目的技术栈来选：

第一步：补全HTML结构 #

首先我们需要给单选按钮统一name属性（保证单选功能），给目标隐藏Div加个唯一ID方便操作，补全后的代码如下：

<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-12 "> 
  <br> 
  <div class="col-sm-3 d"> 
    <label for="">{{__('main.work_condition')}} : <span class="required-red">*</span> </label> 
  </div> 
  <div class="col-sm-6 d"> 
    <!-- 前三个单选按钮 -->
    <label>&ensp;<input type="radio" name="workCondition" value="1"> 选项1</label>
    <label>&ensp;<input type="radio" name="workCondition" value="2"> 选项2</label>
    <label>&ensp;<input type="radio" name="workCondition" value="3"> 选项3</label>
    <!-- 最后一个单选按钮 -->
    <label>&ensp;<input type="radio" name="workCondition" value="4"> 选项4</label>
  </div>
</div>

<!-- 需要控制显示隐藏的Div，初始隐藏 -->
<div id="targetDiv" style="display:none; margin-top:20px;">
  这是被控制显示/隐藏的内容
</div>

第二步：添加交互逻辑 #

方案一：原生JavaScript实现 #

不需要依赖任何库，直接用原生JS监听单选按钮的change事件：

// 获取所有单选按钮和目标Div
const radioButtons = document.querySelectorAll('input[name="workCondition"]');
const targetDiv = document.getElementById('targetDiv');

// 给每个单选按钮绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 判断当前选中的是前三个还是最后一个
    const selectedValue = parseInt(this.value);
    if (selectedValue >=1 && selectedValue <=3) {
      targetDiv.style.display = 'block';
    } else {
      targetDiv.style.display = 'none';
    }
  });
});

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，代码会更简洁：

$(document).ready(function() {
  $('input[name="workCondition"]').on('change', function() {
    const selectedValue = parseInt($(this).val());
    if (selectedValue >=1 && selectedValue <=3) {
      $('#targetDiv').show();
    } else {
      $('#targetDiv').hide();
    }
  });
});

关键逻辑说明 #

• 给所有单选按钮设置相同的name属性，确保同一时间只能选中一个；
• 监听单选按钮的change事件（只有当选中状态改变时才触发）；
• 通过判断选中按钮的value值（或者你也可以用索引判断，比如radioButtons.indexOf(this) <3），来控制目标Div的显示状态。

内容的提问来源于stack exchange，提问作者Ahmed Ma MDouh