Question 300205 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to verify checkbox are unchecked or checked when multiple checkboxes present in Javascript

There are 4 checkboxes present and I need to verify each checkbox is checked or not and if checked then uncheck it and vise versa.

Here am looping all the checkboxes and verifying the check functionality. Initially all checkboxes are checked. When my first element is picked am successfully able to uncheck it. But when second element is picked it checks the first element (instead of checking the second element).

Below is the code snippet.

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")
    }
   }

Also, here is the class attribute value of checked element :

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

class attribute value of unchecked element :

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

2

Answers


  1. 0

    You said you want to check whether all checkbox are checked or not I wanted to ask when do you want to check that, like when user clicks on some submit button or you want to check everytime user click on any of the 4 checkbox?.

    And you also said if it it’s checked I want to uncheck that when do you want to uncheck them when user clicks on some BTN or when user click on a checkbox make all 3 checkbox unchecked except for the one that user clicked?

    Login or Signup to reply.
  2. 0

    I modified the code so that the checkboxElements is re-fetched at the beginning of each iteration to ensure that you are always working with the most current set of elements, hope this helps!

    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");
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search