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

Posted

技术标签:

【中文标题】如何获取切换类型复选框的值【英文标题】：How to get value of toggle type checkbox 【发布时间】：2021-05-14 00:08:29 【问题描述】：

我正在使用切换开关复选框。我想在使用 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>

【问题讨论】：

这会有所帮助：codepen.io/manaskhandelwal1/pen/BaQLmWq 【参考方案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>

【讨论】：

【参考方案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>

【讨论】：

以上是关于如何获取切换类型复选框的值的主要内容，如果未能解决你的问题，请参考以下文章

当一个复选框被切换时，如何获取 QTreeWidget 项目的文本？

JS如何获取表单中复选框的值？

如何获取combobox选中的值

如何获取combobox选中的值

jquery 如何获取单选框的值？

JS如何获取OBJECT的值