Question

我已经下载了一个带有预构建开关组件的主题，该组件取代了普通的复选框功能。这个开关非常适合用户界面，我正在拼命尝试使其工作，但我无法获得基础复选框的“已检查”状态以更改点击/触摸事件。

这是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知识不是很好（更像是一个铁杆人）。有人可以帮我找到我做错了什么吗？

Answer 1

替换此行

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

到

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

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

更新：已将相同的内容归档为错误，并且该小组已将其视为无效错误报告及

这是正确的行为。用户的点击不会删除来自HTML的属性。它只会改变财产。如果你想知道动态，请改用.prop（＆＃34; checked＆＃34;）。

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

测试：使用Vanilla JavaScript

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

SOLN：

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

简单的SOLN W / O JAVASCRIPT：

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

你只需要用'checked'替换属性'true'，即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');
    }
  });
});

使用js切换html / css复选框的已检查状态

3 个答案: