如何在JavaScript（含/不含jQuery）中通过data-*属性值查找复选框

在ASP.NET视图里存在多个复选框和数字输入框，需要在quantityChanged函数内，根据数字输入框的data-productid值，找到对应data-selection-productid值的复选框。因元素ID和Name重复无法使用，之前尝试的代码执行失败。

相关元素代码 #

复选框代码 #

<input type="checkbox" asp-for="@si.IsSelected"
       data-selection-productid="@si.ProductID"                      
       data-linenumber="@si.LineNumber"
       value="@si.ProductID"
       onclick="selectionChanged(this)" />

数字输入框代码 #

<input type="number" asp-for="@si.Quantity" 
       data-productid="@si.ProductID"
       data-linenumber="@si.LineNumber"
       value="@si.Quantity"
       onclick="quantityChanged(this)" /> 

尝试的错误代码 #

theCheckBox = ("input").find(`[data-selection-productid='${productid}']`);

正确实现方法 #

你的错误代码存在两个核心问题：

1. jQuery选择器语法错误，("input")缺少$符号，无法触发jQuery的选择器功能
2. find()方法用于在选中元素的子节点中查找目标，而复选框与输入框是同级关系，该方法不适用

方法1：全局属性匹配（简单直接） #

function quantityChanged(inputElement) {
    // 获取当前输入框绑定的productid
    const productId = inputElement.dataset.productid;
    // 直接通过属性选择器匹配对应复选框
    const theCheckBox = $(`input[data-selection-productid='${productId}']`);
    
    // 找到复选框后可执行后续操作，例如设置选中状态
    // theCheckBox.prop('checked', true);
}

方法2：限定范围查找（性能更优） #

如果页面元素较多，建议先定位到输入框和复选框的共同父容器，再在容器内查找，避免全局遍历：

function quantityChanged(inputElement) {
    const productId = inputElement.dataset.productid;
    // 假设两者共同父容器拥有class="product-item"
    const parentContainer = $(inputElement).closest(".product-item");
    const theCheckBox = parentContainer.find(`input[data-selection-productid='${productId}']`);
    
    // 后续操作...
}

原生JS实现（无需依赖jQuery） #

如果项目未引入jQuery，可使用原生JS实现：

function quantityChanged(inputElement) {
    const productId = inputElement.dataset.productid;
    const theCheckBox = document.querySelector(`input[data-selection-productid='${productId}']`);
    
    // 找到复选框后执行操作，例如设置选中
    // if (theCheckBox) theCheckBox.checked = true;
}

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