title: How to get value of toggle type checkbox
body: <p>I am using a toggle switch checkbox. I want to get the value of this switch when its state is changed using javascript or jQuery.</p>
  <p>According to that value I want to highlight the text of <code>label</code> i.e. <code>option1</code> or <code>option2</code> used with the toggle switch.</p>
  <p>Can someone help me to resolve this problem?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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&gt;input:checked+span:before,
  .checkbox-inline.checbox-switch&gt;input:checked+span:before {
    left: 16px;
    top: -2px;
  }
  
  
  /* Switch Primary */
  
  .checkbox.checbox-switch.switch-primary label&gt;input:checked+span,
  .checkbox-inline.checbox-switch.switch-primary&gt;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&gt;input:checked:disabled+span,
  .checkbox-inline.checbox-switch.switch-primary&gt;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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkbox checbox-switch switch-primary"&gt;
    &lt;label id="option1" for="switch1"&gt;Option1&lt;/label&gt;&amp;nbsp;
    &lt;label&gt;
      &lt;input type="checkbox" name="" checked="" id="switch1" /&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/label&gt;
    &lt;label id="option2" for="switch1"&gt;Option2&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>