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>
<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