如何获取切换类型复选框的值

Question

我正在使用切换开关复选框。我想在使用 javascript 或 jQuery 更改状态时获取此开关的值。

根据该值，我想突出显示label 的文本，即option1 或option2 与拨动开关一起使用。

谁能帮我解决这个问题？

.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;
}

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

Answer 1

告诉它是不是你想要的:)

$('.checbox-switch label#option1, .checbox-switch label#option2').click(function() {
  var getID = $(this).attr('id');
  $('.checbox-switch label').removeClass('selected');
  $(this).addClass('selected');
  console.log(getID);
})

.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;
}
.selected { border-bottom:1px solid cyan; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

你需要添加一个事件监听器：

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

EventTarget 方法addEventListener() 设置了一个函数，该函数将在指定事件传递到目标时调用。常见的目标是 Element、Document 和 Window，但目标可以是任何支持事件的对象（例如 XMLHttpRequest）。

addEventListener() 的工作原理是将实现EventListener 的函数或对象添加到调用它的EventTarget 上指定事件类型的事件侦听器列表中。

例子

let test = document.querySelector('#switch1');

test.addEventListener('change', function() { 
  if (this.checked == true) {
    console.log('true');// do here what you need instead
  } else {
    console.log('false')// do here what you need instead
  }
 
})

.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;
}

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

为未来的读者编辑，一个切换类的工作示例

let test = document.querySelector('#switch1');

test.addEventListener('change', function() {
  if (this.checked == true) {
    console.log('true'); // do here what you need instead 
    switchTest()
  } else {
    console.log('false') // do here what you need instead 
    switchTest()
  }

})

function switchTest() {
  let options = document.querySelectorAll('label[id^=option]');
  for (i = 0; i < options.length; i++) {
    options[i].classList.toggle('highlight');
  }
}

.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;
}

.highlight {
  background: yellow;
}

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