mercredi 10 février 2021

How to get value of toggle type checkbox

I am using toggle switch checkbox type. I want to get value of this switch when its state changed using javascript or jquery. According to that value I want to highlight the text of 'label' i.e. 'option1' or 'option2' used with the toggle switch. Can someone help me to resolve this problem?

HTML is:

          <div class="checkbox checbox-switch switch-primary">
               <label id="option1"for="switch1">Option1</label>&nbsp;
                      <label>
                          <input type="checkbox" name="" checked="" id="switch1"/>
                          <span></span>
                      </label>
               <label id="option2" for="switch1">Option2</label>     
          </div>

CSS code is:

.checkbox.checbox-switch {
    padding-left: 0;
}

.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
    display: inline-block;
    position: relative;
    padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
    display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
    width: 35px;
    border-radius: 20px;
    height: 18px;
    border: 1px solid #dbdbdb;
    background-color: gray;
    border-color: gray;
    box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(255,255,255);
    content: " ";
    top: 0;
    position: relative;
    left: 0px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    top:-2px;
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
    left: 16px;top:-2px;
}

/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
    background-color: rgb(103, 209, 224);
    border-color: rgb(103, 209, 224);
    /*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
    background-color: gray;
    border-color: gray;
   /* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}



Aucun commentaire:

Enregistrer un commentaire