JS模板在QuerySelectorall中的字面词与复选框产生错误：检查条件

Question

这是我今天第三次解决这个问题。每次有人回答我的问题时，我都非常感谢您的帮助，但是问题部分解决了简单的部分。重要的部分仍未产生所需的输出。

我有一个由选项组名称分组的选项的表单。我正在尝试使用模板文字在我的JS代码中获取选项group名称，以检查输入复选框是否已检查。应该很容易，但我在最后一部分无法成功。

我的表格是使用Svelte和HTML

<form name="optionsform" on:submit|preventDefault={()=>collectoptions(itemid, itemprice, itemname,  itemdescription, variationname, variationprice)}>
    
    {#if option['rules'] == "exactly"}
    {#each option.optiongroupitems as optionitem, index} 
    <li style="list-style : none;">
    <label>
        <input  type="checkbox" class={option.groupheader} bind:group={values.exactly} value={optionitem.name} on:click={()=> Validateexactly(option.rulesnumber.number, option.groupheader, optionitem.name)} >
         {optionitem.name} : {optionitem.price}
    </label>
    </li>
    {/each}
    {/if} 
    <button type="submit" >Add To cart</button>
    </form>

validateExactly函数的典型表格：

 function Validateexactly(limit, groupheader, name) { 
    let getexactlygroup = `${groupheader}` 
    console.log("this is logging corrertly the option group name :", getexactlygroup)
    
    exactlylimit = limit
    var checks = document.querySelectorAll(".getexactlygroup"); // how do I reference option.groupheader correctly?  
    checks.forEach((item, index)=>{
    
      console.log("showing empty list array ", item) 
    
    })
    
    for (var i = 0; i < checks.length; i++)
     checks[i].onclick = selectiveCheck;
    function selectiveCheck (event) {  
     var checkedChecks = document.querySelectorAll('.getexactlygroup'[type="checkbox"]:checked');//showing errors that selector is invalid selector. 
     if (checkedChecks.length >= exactlylimit + 1){
       return false;
     }
    }
    
    } 

在很少有人发布答案之后，我使此部分工作了：

let checks = document.querySelectorAll(`.${getexactlygroup}`); 

现在，我可以在Console.log中看到所有我的选项组输入。

过去一个小时我尝试的问题是这一行：

var checkedChecks = document.querySelectorAll( `.${getexactlygroup}`.input[type="checkbox"][checked]);

我尝试了以下内容，并且发现类型不是有效的选择器，输入不是有效的选择器。因此，如何从先前的答案中失败了如何使用模板文字。我读取有关MDN的字面模板，然后读取QuerySelector部分。

var checkedChecks = document.querySelectorAll( `.${getexactlygroup}`.input[type="checkbox"]:[checked]); 

var checkedChecks = document.querySelectorAll( `.${getexactlygroup}`input[type="checkbox"]:[checked]);

var checkedChecks = document.querySelectorAll( `.${getexactlygroup}`.input[type="checkbox"][checked]); 
var checkedChecks = document.querySelectorAll( " `.${getexactlygroup}`.input[type="checkbox"]:[checked]");

在MDN中，有人写道： 注意：不属于标准CSS语法一部分的字符必须使用后斜切字符逃脱。由于JavaScript还使用Backsslash逃脱，因此在使用这些字符编写字符串文字时要特别小心。有关更多信息，请参见逃脱特殊字符。

如何使用。$ {getExactlyGroup} [输入类型复选框]：在JS中检查？ 我很沮丧，我认为这不是那么困难，但我无法弄清楚。有JS Ninja带有坚实的JS知识，谁能帮助我？

Answer 1

在这种情况下，您不需要任何查询选择器。
我会构建这样的复选框组件：

<script> 
//there are variables to export
  export let value
  export let group
  export let name
  export id
  export let checked

// this is a function to "catch" your changes if the answer that you expect is equal to value that the user will check

function onChange(event: Event) {
    group = (<HTMLInputElement>event.target).value;
  }
  $: checked = (group === value)

</script>


<input type="checkbox" id={id} bind:group={ group } value={ value } name={ name } on:change="{ onChange }" { checked }/>
<slot/>