html 如何在JavaScript中使用或不使用Jquery通过data-* 值找到CheckBox

ewm0tg9j  于 2023-11-15  发布在  Java
关注(0)|答案(1)|浏览(123)

我在ASP.NET视图中有几个复选框,从JavaScript函数中,我需要通过复选框上的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)" />

字符串
上面引用的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值相同的CheckBox。
我已经尝试了下面代码的几种变体,但都没有用。我已经验证了textBox中的productid是有效的,并且与页面显示时的productid相同。

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


当执行到上面的代码行时,JavaScript终止。
任何帮助将不胜感激。

s4n0splo

s4n0splo1#

你的代码不工作的原因,是因为你试图在一个非JQuery对象上调用JQuery函数(你错过了$符号)。
但是,你可以很容易地在纯JavaScript中做到这一点。如果产品id保存到变量productId中,你可以使用以下查询选择器:

document.querySelectorAll(`input[data-selection-productid="${productId}"]`);

字符串
这将选择所有具有值为“valuehere”的属性“data-selection-productid”的“input”元素。
此外,如果属性的值无关紧要,您还可以选择具有'data-selection-productid'属性的所有元素,而不管其值如何:

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

相关问题