如何在jQuery的goNext函数中获取ul选项并取消勾选非目标复选框

问题原因排查 #

你之前代码不生效大概率存在两个前置问题：

• 行内onclick属性存在引号嵌套错误：外层用了双引号包裹属性值，内部goNext的参数又用了双引号，会导致HTML语法解析错误，函数根本无法正常触发
• 行内调用的goNext函数默认上下文this指向window，不是你点击的li元素，所以直接调用.parent()/.closest()拿不到对应的DOM节点

修复方案 #

第一步：修正HTML语法 #

把li标签的onclick属性内部的参数引号改为单引号：

<ul id="channelFieldUL" class="dropdown-menu channelFieldUL">
   <li class="sourceFieldRecordClass" onclick="goNext('account')">
       <a>
       <label>
          <input type="checkbox" value="account" class="apiFieldRecord" id="account0"> "account"
       </label>
       </a>
   </li>
   <!-- 其他li结构同理 -->
<ul>

第二步：编写goNext函数逻辑 #

基于你现有的传参方式，直接通过传入的source值定位当前复选框，再批量取消其他选项的勾选：

function goNext(source){
  // 定位当前点击项对应的复选框
  const $currentCheckbox = $(`#channelFieldUL input.apiFieldRecord[value="${source}"]`);
  // 保持当前复选框为勾选状态
  $currentCheckbox.prop("checked", true);
  // 选中同列表下所有其他复选框，取消勾选
  $("#channelFieldUL input.apiFieldRecord").not($currentCheckbox).prop("checked", false);

  // 此处保留你原来的其他业务逻辑
}

注：以上代码依赖jQuery，如果你用原生JS实现可以自行调整选择器逻辑

更优写法推荐（无需行内onclick） #

如果可以调整写法，更推荐用事件绑定的方式实现，不需要手动传参数，维护更方便：

1. 去掉所有li标签的onclick属性
2. 新增如下JS逻辑：

// 页面加载完成后绑定点击事件
$(document).ready(function() {
  $(".sourceFieldRecordClass").on("click", function() {
    // 直接查找当前点击li下的复选框
    const $currentCheck = $(this).find(".apiFieldRecord");
    // 保持当前勾选
    $currentCheck.prop("checked", true);
    // 同级其他li下的复选框全部取消勾选
    $(this).siblings().find(".apiFieldRecord").prop("checked", false);

    // 要获取当前选中值直接调用 $currentCheck.val() 即可
  })
})

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