How to check multiple boxes using C# for Selenium

I am having a problem being able to check both of these "checkboxes" when trying to run a test for Selenium using C#.

Here is what I have for the first checkbox and that does work and checks the box. driver.FindElement(By.XPath("//label[@for='LegitimateCompanyAgreementCheckBox']")).Click();

However if I simply use the label for the other checkbox, which is "TermsOfServiceCheckBox", it does not check the box, but it actually opens up a link because the this checkbox has 2 hyperlinks inside the wording.

For example if I try using: driver.FindElement(By.XPath("//label[@for='TermsOfServiceCheckBox']")).Click(); This will not check the box, it will actually open up the link for /terms-of-service.

Here is the code for both checkboxes I need to check.

<div class="asp-checkbox">
    <span class="checkbox gaClick" data-category="companySignup" data-action="legitimateCompanyChecked" data-noninteraction="true">
        <input id="LegitimateCompanyAgreementCheckBox" type="checkbox" name="ctl00$MainContent$LegitimateCompanyAgreementCheckBox">
        <label for="LegitimateCompanyAgreementCheckBox">I am a legitimate estate sale company or auction company and have the documents necessary to conduct business in my state (if any).</label>
    </span>
    <label for="LegitimateCompanyAgreementCheckBox"></label>
    <span id="LegitimateCompanyAgreementCheckBox_requredCheckBoxValidor" controltovalidate="LegitimateCompanyAgreementCheckBox" style="color:Red;visibility:hidden;">* 
    </span>
</div>


<span class="checkbox gaClick" data-category="companySignup" data-action="agreeToTermsChecked" data-noninteraction="true">
    <input id="TermsOfServiceCheckBox" type="checkbox" name="ctl00$MainContent$TermsOfServiceCheckBox">
        <label for="TermsOfServiceCheckBox">I agree to EstateSales.NET's <a href="/terms-of-service" class="gaClick" data-category="companySignup" data-action="termsOfServiceClicked" target="_blank">Terms of Service</a>
and <a href="/privacy-policy" class="gaClick" data-category="companySignup" data-action="privacyPolicyClicked" target="_blank">Privacy Policy</a>.
    </label>
</span>

Checkbox functioning, but not animating

I am using a dark mode toggle in the header navigation and mobile menu of my site. Both are functioning as they should, except only 1 animates the toggle on/off as it clicked. I would also like the text beside the toggles to switch from "Dark" to "Light" as it is clicked. Any help would be appreciated.

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
    }    
}

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

/********** DARK THEME TOGGLE START **********/
    
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
}
    
[data-theme="dark"] .theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #F8F0E3;
}
    
.theme-switch {
  display: inline-block;
  height: 18px;
  position: relative;
  width: 30px;
  margin-top: -4px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider:before {
  background-color: #000;
  bottom: 1px;
  content: "";
  height: 12px;
  left: 2px;
  position: absolute;
  transition: .4s;
  width: 12px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider.round {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider.round:before {
  border-radius: 50%;
}
    
.header__toggle {
  position: absolute;
  top: 7px;
  right: 20px;
}
    
@media screen and (max-width: 768px) {    
.header__toggle {
  position: absolute;
  top: 0px;
  right: 10px;
}
}
    
.is-light .site-toggle__link{
   color:#fff!important;
}

[data-theme="dark"] .is-light .site-toggle__link{
   color:#F8F0E3!important;
}
  
[data-theme="dark"] .site-toggle__link{
  color: #000!important;
  color:var(--colorNavText)
}
   
/********** DARK THEME TOGGLE END **********/
    
/********** DARK THEME MOBILE TOGGLE START **********/
    
.theme-switch-mobile-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-mobile-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 13px;
  margin-left: 7px;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 3px;
}
    
[data-theme=dark] .theme-switch-mobile-wrapper p {
    font-family: Arial MT Pro!important;
    margin-top: 13px;
    margin-left: 7px;
    font-size: 24px;
    color: #f8f0e3;
    letter-spacing: 3px;
}
    
.theme-switch-mobile {
    display: inline-block;
    height: 21px;
    position: relative;
    width: 33px;
    margin-top: -4px;
}

.theme-switch-mobile input {
  display:none;
}

.slider-mobile {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider-mobile:before {
    background-color: #000;
    bottom: 1px;
    content: "";
    height: 15px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 15px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider-mobile {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}

input:checked + .slider-mobile:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider-mobile.round-mobile {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider-mobile.round-mobile:before {
  border-radius: 50%;
}

.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
    
@media screen and (max-width: 768px) {    
.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
}
   
/********** DARK THEME MOBILE TOGGLE END **********/

<div class="theme-switch-wrapper header__toggle site-toggle__link">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
    </label>
        <p>DARK</p>
</div>
    
<div class="theme-switch-mobile-wrapper mobile__toggle">
     <label class="theme-switch-mobile" for="checkbox">
        <input type="checkbox" id="checkbox2" />
        <div class="slider-mobile round-mobile"></div>
     </label>
        <p>DARK</p>
</div>

Check certain checkboxes when toggle is active

Hi I have a form where people need to fill out on what days they work.

I have checkboxes from monday to sunday like this:

<a href="javascript:void(0)" class="form__input"
    @click="setCurrentDay('monday')">
    <input name="checkbox_field0 weekday" id="checkbox_field0" type="checkbox" class="special">
    <label for="checkbox_field0">Monday</label>
</a>

and so on...

Above this there is a toggle people can click if they work monday to friday. When they click this I want the checkboxes monday to friday to be (un)checked.

the toggle:

<div class="toggle-switcher">I work monday to friday</div>

What is the best way to achieve this?

make checkboxes checked depending on database values in angular

I am showing multiple checkboxes depending on database fetched values. And I need to make them checked from stored values.

Template code

 <div class="col-lg-12">
                <div class="form-group">
                  <label class="w-100">Type of events <b style="color: red">*</b></label>
                  <div class="pretty_wrapper">
                    <div class="pretty p-default"  *ngFor="let event of EventTypes index as i">
                      <input type="checkbox" 
                      [name] = "'EventType_'+event.id" 
                      [value]="event.id" 
                      (change)="onCheckboxChange($event)"
                      
                      />
                      <div class="state d-flex"  >
                        <label>  </label>
                      </div>
                    </div>
                  </div>
                  <div class="text-danger" *ngIf="submitted && this.form.controls['checkArray'].errors?.required" >
                    Event type is required, select atleast one value.
                  </div>

                </div>
              </div>

component code

EventTypes: any = [];
  selectedEventIds:any = [];
...
 this.userService.getEventType().subscribe((data) => {
      console.log(data);
      this.EventTypes = data.data;
    });
....
 if (results['status'] === true) {

for (let event_type of results.data.event_type) {
              this.selectedEventIds.push(event_type.event_type_id);
            }
...

First I am showing database default elements in checkboxes by iterating EventTypes . And storing user selected value. I am fetching those selected values in selectedEventIds. Now I need to make checkboxes checked if id and fetched value matches.

I tried by adding [attr.checked]="selectedEventIds[i] === event.id ? true : null" but its not working.

Somehow I need to check each value of selectedEventIds with current event.id. How I can do that in angular? Is there any other way to make checkbox checked depending on database values?

Please guide and help. Thanks in advance.

Page refresh on check/uncheck of checkbox in thymeleaf spring boot

I have two checkbox on a page without any button, currently if I check/uncheck the checkbox, it automatically refresh the page and insert the values in database, but I don't want to refresh the page on check/uncheck and I want that the value should insert in database without reloading in thymeleaf. Any solution will be helpful. Thank you in advance.

how should I get checked and unchecked values of dynamic checkbox array in php

i have this kind of table where I have to store if checkbox is ticked or not because I use them like boolean

name	isEmployed	isSoloParent
john	1	0

I have to make the form dynamic, therefore people can add many rows as they want to fill up many at a single time.

There's no problem doing it for text inputs which can be easily done with <input type="text" name="name[]"> and some standard PHP $name=$_POST['name']; however I can't seem to apply the same concept to checkboxes. it doesnt receive unchecked values (NULL in sql) nor get read by php ISSET.

'Form.checkBox1' is inaccessible due to its protection level

I am trying to get a checkbox's state and apply that to another checkbox on a different form but I get this error:

'Form.checkBox1' is inaccessible due to its protection level

My code is:

Form1 f1 = new BananaWare();
            f1.checkBox1.Checked = !checkBox1.Checked;
            f1.Show();

How do I fix this error?