svelte access to referenced class in a form input inside my script using querySelectorAll

Question

I have a form that display group of options for an item. User select the required number of options and I validate the selected options in the script.

The form :

    <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

In my script, function 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;
     }
    }
    
    }

My question how to reference the class with the {option.groupheader} in the form, how to reference that in my script using querySelectorAll?

The reason I need it to reference that is because the option groups is coming from the db and I don't have control over the db and there are more than one option group for each item. So I thought to group them by option group name or I can reference the group id which is like big string (62b52ed4f7a2ed2a506db0b1) and I'm not sure if I can reference that in my script using the querySelectorAll. Unless there is another way to group options and get the checked one using different method.

I see the way I organized it as simple if I can figure out how to reference the option.groupheader in my script correctly.

My question is : How to reference the class={option.groupheader} in my script to get all checked input with that class and access its length?

Answer 1

getexactlygroup is a variable, have a look at Template literals (Template strings)

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

(If you have a look at the answer of your last question, it's in there too)