Svelte使用QuerySelectorAll在我脚本中的形式输入中访问引用的类

Question

我有一个表格，显示一个项目的选项组。用户选择所需数量的选项，然后我验证脚本中所选选项。

表格：

    <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;
     }
    }
    
    }

我的问题如何用{option.groupheader}以表单引用类，如何使用queryselectorall在脚本中引用该类？

我需要参考的原因是，因为选项组来自数据库，我无法控制DB，并且每个项目都有一个以上的选项组。因此，我想到按选项组名称对它们进行分组，或者可以引用类似Big String（62B52ED4F7A2ED2A506DB0B1）的组ID，我不确定是否可以使用QuerySelectorAll将其引用。除非还有另一种方法来分组选项并使用不同的方法进行检查。

如果我能弄清楚如何正确参考选项。脚本中的groupheader，我认为我的组织方式很简单。

我的问题是：如何在我的脚本中引用类= {option.groupheader}的类以获取所有类别的输入并访问其长度？

Answer 1

getExactlyGroup是一个变量，请查看模板文字（模板字符串）

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

（如果您看上一个问题的答案，它也在那里）