querySelectorAll中的模板字面量产生了一个带有复选框的错误:checked condition

Question

今天是第三次了。每次有人回答我的问题，我都非常感谢他们的帮助，但问题部分解决了容易的部分。重要的部分仍然没有产生期望的输出。

我有一个按选项组名称分组的选项表单。我试图使用模板文字来获得我的js代码中的optiongroup名称来检查输入复选框是否选中。应该很容易，但我不能成功的最后一部分。

我的表单是典型的使用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:

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也使用反斜杠转义，因此在使用这些字符编写字符串字面量时要特别小心。有关详细信息，请参见转义特殊字符。

我如何使用.${getexactlygroup}[输入类型复选框]:在js中勾选?我很沮丧，我不认为这有多难，但我想不出来。有什么精通js知识的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/>