如何 select 具有自定义属性的元素？

Question

I am trying to select this checkbox using Javascript

<input type="checkbox" class="cc_filter_checkbox cc_checkbox" data-specid="a1h02000000L"data-spec="BRAND" data-value="Testval">

the code below works but is not ideal

const obj = document.querySelector("#collapsea1h02000000L > ul > li:nth-child(2) > div > label > input");

I tried these

const obj = $('input[data-value="Testval"]');

$('input[data-value="Testval"]').click();

const obj = document.evaluate("//input[contains(text(),'Testval')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

but they did not work. Any thoughts on how I can get this to work?

UPDATED CODE with data-value not hardcoded

const params = new URLSearchParams(window.location.search);
                       
  if(params.has('brand')) {

     const sel = 'input[data-value="' + param + '"]';
                
     // find the element (checkbox) with the brand name
     const obj = $(sel)[0];  

Answer 1

Using jQuery you can retrieve via data-value.

 const item = $('input[data-value="Testval"]')[0]; console.log(item.value); item.click();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="cc_filter_checkbox cc_checkbox" data-specid="a1h02000000L"data-spec="BRAND" data-value="Testval" value="your-val">