使用 js 切换 html/css 复选框的选中状态

Question

我下载了一个带有预先构建的开关组件的主题，该组件取代了普通的复选框功能。这个开关非常适合 UI，我正在拼命尝试让它工作，但我无法让底层复选框的“已检查”状态在点击/触摸事件时更改。

这是html结构：

<div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
  <div class="switch-off switch-animate">
    <input checked type="checkbox">                                                           
    <span class="switch-left"><i class="fa fa-check"></i></span>
    <label>&nbsp;</label>
    <span class="switch-right"><i class="fa fa-times"></i></span>
  </div>
</div>

开关功能工作得很好，但我无法让它切换复选框输入属性的“已选中”值。

我尝试了一些解决方案。我试过的最后一个是这个（注意这是一个测试，看看我是否至少可以让它在点击时取消选中）：

$(function () {
  $('.switch').click(function() {
    console.log(this);
    var CheckboxInput = $(this).find('input[type="checkbox"]');
    if ($(CheckboxInput).is(':checked')) {
      CheckboxInput.prop('checked', false);
    }
    }
  });
});

我的 javascript 知识不是很好（更像是一个 Rails 人）。谁能帮我找出我做错了什么？

Answer 1

索尔：

$(function() {
  $('.switch').click(function() {
    var checkBoxes = $(this).find('input');
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  });
});

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
  <div class="switch-off switch-animate">
    <input checked type="checkbox">
    <span class="switch-left"><i class="fa fa-check">LEFT</i></span>
    <label>&nbsp;</label>
    <span class="switch-right"><i class="fa fa-times"></i>RIGHT</span>
  </div>
</div>

一个没有 JAVASCRIPT 的简单 SOLN：

.switch {
  position: relative;
  display: block;
  vertical-align: top;
  width: 100px;
  height: 30px;
  padding: 3px;
  margin: 0 10px 10px 0;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
  border-radius: 18px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.switch-input {
  position: absolute;
  top: 0;
  left: 200px;
  opacity: 50;
}
.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before,
.switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}
.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaaaaa;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: #FFFFFF;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.switch-input:checked ~ .switch-label {
  background: #E1B42B;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}
.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
  background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
  border-radius: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
  left: 74px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-label,
.switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<label class="switch">
  <input class="switch-input" type="checkbox" />
  <span class="switch-label" data-on="ONL" data-off="Off"></span> 
  <span class="switch-handle"></span> 
</label>

Answer 2

替换这一行

if ($(CheckboxInput).is(':checked')) {
  CheckboxInput.prop('checked', false);
}

到

CheckboxInput.prop('checked', !$(CheckboxInput).is(':checked'));

工作小提琴：https://jsfiddle.net/codeandcloud/xnq16htu/

更新：已将其作为错误提交，团队已将其视为无效错误报告和注释，

这是正确的行为。用户的点击不会删除 来自 HTML 的属性。它只会改变属性。如果你想 知道动态，使用 .prop("checked") 代替。

链接：https://bugs.jquery.com/ticket/10730

测试：使用 Vanilla JavaScript

var container = document.getElementById("container"),
    elm = document.getElementById("test-check");
elm.addEventListener("click", function() {
    console.log("CheckBox Markup: ", container.innerHTML);
    console.log("CheckBox Status: ", elm.checked);
});

<div id="container">
    <input id="test-check" type="checkbox" checked />
</div>

Answer 3

您只需将属性 'true' 替换为 'checked' 即 CheckboxInput.prop('checked','checked');

        <div class="switch has-switch" data-off-label="<i class='fa fa-times'></i>" data-on-label="<i class='fa fa-check'></i>">
  <div class="switch-off switch-animate">
    <input type="checkbox" checked>                                                           
    <span class="switch-left"><i class="fa fa-check"></i></span>
    <label>&nbsp;</label>
    <span class="switch-right"><i class="fa fa-times"></i></span>
  </div>
</div>



$(function () {
  $('.switch').click(function() {
    console.log(this);
    var CheckboxInput = $(this).find('input[type="checkbox"]');
    if ($(CheckboxInput).is(':checked')) {
      CheckboxInput.prop('checked','checked');
    }
  });
});