为匹配Radio值的.nc-option添加.active类的jQuery实现问题

你的问题主要出在获取选中Radio值的方式不对，还有没处理「移除其他选项active类」的逻辑，我帮你调整代码如下：

修改后的JavaScript代码 #

jQuery(document).ready(function() {
  // 页面加载时先初始化active类，匹配默认选中的Radio
  const initialCheckedValue = $("#campaign_select input[type='radio']:checked").val();
  $(".nc-option[data-function='" + initialCheckedValue + "']").addClass('active');

  jQuery(document).on("click", "[id^=choice]", function() { 
    const clickedValue = $(this).data("function");
    
    // 先移除所有选项的active类，避免多个选项同时高亮
    $(".nc-option").removeClass('active');
    // 给当前点击的选项添加active类
    $(this).addClass('active');
    
    // 同步切换对应的Radio状态
    $("#campaign_select input[value=" + clickedValue + "]").prop("checked", true).trigger('change');
  });

  // 额外处理Radio被其他方式改变的情况（比如键盘操作），同步更新按钮状态
  jQuery(document).on("change", "#campaign_select input[type='radio']", function() {
    const selectedValue = $(this).val();
    $(".nc-option").removeClass('active');
    $(".nc-option[data-function='" + selectedValue + "']").addClass('active');
  });
});

问题原因分析 #

1. 错误的Radio值获取：你原来用$("#campaign_select input").val()，这个选择器会选中区域内的第一个input（也就是那个隐藏的<input type="hidden">），而不是选中的Radio，导致判断逻辑完全失效。正确做法是用$("#campaign_select input[type='radio']:checked").val()获取选中的Radio值。
2. 未处理全局active类移除：如果只单独处理当前点击元素的active类，之前选中的选项的active状态不会被清除，会出现多个选项同时高亮的问题。
3. 缺少初始状态初始化：页面加载时，默认选中的Radio对应的按钮没有自动加上active类，需要在页面就绪时手动初始化一次。
4. 忽略非点击触发的Radio切换：用户可能通过键盘等方式切换Radio，这时候按钮的active状态也需要同步更新，所以要监听Radio的change事件。

其他无需修改的代码 #

CSS #

.nc-type { background: #1b2836; border: 1px solid black; padding: 8rem 4rem; padding-bottom: 0; border-bottom: 0; } 
.nc-type p { color: #8899A6; max-width: 500px; } 
.nc-type h3 { margin-bottom: 1rem; } 
.page-template-page-submit .page-body-inner { border-top: 0; } 
#campaign_select .acf-radio-list { display: block; } 
.nc-option { background: #243447; padding: 2rem; border: 1px solid black; margin-bottom: 4rem; transition: 0.3s ease all; } 
.nc-option label { color: #fff; } 
.nc-option:hover { background: #2c3f56; cursor: pointer; } 
.nc-option svg { position: relative; top: 5px; } 
.nc-option p { color: #8899A6; font-size: 14px; margin: 0; } 
.nc-option-1 .a { fill: #1DA1F2; } 
.nc-option-2 .a { fill: #f2771d; } 
.nc-option-3 .a { fill: #1df27f; } 
.nc-option-4 .a { fill: #f21d90; } 
.active { border-color: #1da1f2; } 

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="nc-campaign-select"> 
  <div id="choice1" class="nc-option nc-option-1" data-function="1"> 
    <label>Option 1</label> 
  </div> 
  <!-- end of option --> 
  <div id="choice2" class="nc-option nc-option-2" data-function="2"> 
    <label>Option 2</label> 
  </div> 
  <!-- end of option --> 
</div> 
<div id="campaign_select"> 
  <div class="acf-input"> 
    <input type="hidden"> 
    <ul> 
      <li> 
        <label class="selected"> 
          <input type="radio" id="ac-1" name="ac" value="1" checked="checked">Option 1</label> 
      </li> 
      <li> 
        <label class=""> 
          <input type="radio" id="ac-2" name="ac" value="2">Option 2</label> 
      </li> 
    </ul> 
  </div> 
</div>

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