如何通过 JavaScript 中的 data-* 值查找复选框（无论是否使用 Jquery）

Question

我在 ASP.NET 视图上有几个复选框。在 Javascript 函数中，我需要找到复选框，不是通过 ID 也不是通过名称，而是通过复选框上的 data-selection-productid 属性中的值。

复选框如下：

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

上面的selectionChanged函数参考不是需要找到CheckBox的函数，而是下面的Textbox事件需要CheckBox。下面的代码位于 foreach 循环内，生成此行代码以及用于计算集合中产品数量的第一组代码行。正是由于这个原因，ID 和名称都不起作用。它们会被复制。不重复的是复选框内 data-selection-productid 值中的值。

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

因此，从QuantityChanged函数中，我需要找到其data-selection-productid值与上面文本框上的data-productid值相同的复选框。

我尝试了以下代码的几种变体，但没有成功。我已验证文本框中的productid 是有效的，并且与显示页面时的产品id 相同。

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

当执行到上面的代码行时，JavaScript 将终止。

任何帮助将不胜感激。

Answer 1

您的代码不起作用的原因是您试图在非 JQuery 对象上调用 JQuery 函数（您缺少 $ 符号）。

但是，您可以使用简单的 Javascript 轻松完成此操作。使用以下查询选择器：

document.querySelectorAll(`input[data-selection-productid="valuehere"]`);

这将选择所有具有属性“data-selection-productid”且值为“valuehere”的“input”元素。

此外，如果属性的值无关紧要，您还可以选择具有“data-selection-productid”属性的所有元素，而不管其值如何：

document.querySelectorAll(`input[data-selection-productid]`);