当Javascript中存在多个复选框时，如何验证复选框是未选中还是已选中

Question

存在 4 个复选框，我需要验证每个复选框是否已选中，如果选中则取消选中它，反之亦然。

这里循环所有复选框并验证检查功能。最初，所有复选框均被选中。当我选择第一个元素时，我可以成功取消选中它。但是，当选择第二个元素时，它会检查第一个元素（而不是检查第二个元素）。

下面是代码片段。

var checkboxElements = await $$(`(//astd-courses-approval-checks//mat-checkbox)`);
    for(let i= 1 ; i < checkboxElements.length ; i++ ){
     var getcheckBoxElem = await $(`(//astd-courses-approval-checks//mat-checkbox)[${i}]`);
     var getclass = await Actionutility.getAttribute( getcheckBoxElem, 'class');
    if ( getclass.includes("mat-mdc-checkbox-checked") ){
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem) , "Is unchecked")
    }else{
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem) , "Is checked")
    }
   }

此外，这是选中元素的 class 属性值：

class="mat-mdc-checkbox mat-checkbox-multiline mat-accent ng-pristine ng-valid mat-mdc-checkbox-checked ng-touched"

未选中元素的class属性值：

class="mat-mdc-checkbox mat-checkbox-multiline mat-accent ng-valid ng-dirty ng-touched"

Answer 1

你说你想检查是否所有复选框都被选中，我想问你什么时候想检查，比如当用户单击某个提交按钮时，或者你想在每次用户单击 4 个复选框中的任何一个时检查？

您还说过，如果它被选中，我想取消选中，当用户单击某个 BTN 时，或者当用户单击某个复选框时，您想何时取消选中它们，除了用户单击的那个复选框外，所有 3 个复选框均未选中？

Answer 2

我修改了代码，以便在每次迭代开始时重新获取

checkboxElements

，以确保您始终使用最新的元素集，希望这会有所帮助！

for (let i = 0; i < checkboxElements.length; i++) {
    checkboxElements = await $$(`(//astd-courses-approval-checks//mat-checkbox)`);
    var getcheckBoxElem = checkboxElements[i];

    var getclass = await Actionutility.getAttribute(getcheckBoxElem, 'class');
    if (getclass.includes("mat-mdc-checkbox-checked")) {
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem), "Is unchecked");
    } else {
        await Actionutility.click(getcheckBoxElem);
        console.log(await Actionutility.getText(getcheckBoxElem), "Is checked");
    }
}