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

我已经下载了一个带有预构造开关组件的主题，它取代了普通的复选框功能。这个开关非常适合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>

我的javascript知识不是很好（更多的是rails）。谁能帮我找出我做错了什么吗？

更换这一行

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

到

工作小提琴：

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

这是正确的行为。用户的单击不会删除 属性。它只会更改属性。如果你想 了解动态状态，改用.prop（“checked”）

链接：

测试：使用普通JavaScript

var container=document.getElementById（“容器”），
elm=document.getElementById（“测试检查”）；
elm.addEventListener（“单击”，函数（）{
log（“复选框标记：”，container.innerHTML）；
日志（“复选框状态：”，elm.checked）；
});

解决方案：
$（函数（）{
$（'.switch'）。单击（函数（）{
var复选框=$（this.find（'input'）；
复选框.prop（“选中”），！复选框.prop（“选中”）；
});
});

左边
正确的
您只需将属性“true”替换为“checked”，即CheckboxInput.prop（'checked'，'checked'）


$（函数（）{
$（'.switch'）。单击（函数（）{
console.log（this）；
var CheckboxInput=$（this）.find（'input[type=“checkbox”]”）；
if（$（CheckboxInput）.is（'：checked'））{
CheckboxInput.prop（'checked'，'checked'）；
}
});
});
感谢您的快速回复@naveen。它仍然不会切换输入的选中状态这似乎不会切换html中的“选中”属性。如果你在小提琴上使用firebug或chrome开发控制台，你就能明白我的意思。它确实会检查和取消检查ui上的输入，但是代码中的属性不会被添加/删除。谢谢这个@iceman。但这使用了实体的“name”属性吗？我正在寻找在组件级别添加此功能的东西。这样，每当我使用这个css/html组件时，它都会工作。有没有一种方法可以让您的解决方案更适合输入类型？更具体地说，问题中给出的HTML结构中的复选框输入。确定要绑定到的属性或条件是什么？我将进行相应的编辑。@Herm cud您可以创建一个小提琴或代码段工作示例，这样，我可以将soln集成到其中，这对我们双方来说都会更容易。我希望它具有切换功能，可以将任何复选框输入放在我原始问题中指出的html结构中。因此，使用.switch类并查找类型为“checkbox”的子元素，并切换所述元素的选中状态。不，它没有。哇，我对你的帮助感到惊讶。如果右键单击代码段并检查元素，您将看到它不会切换输入的属性值。我真的很感谢你的全力帮助！！！！！谢谢你的回答@DPT。但这并不能解决使用JS切换属性的问题。不过，一开始它会将html值设置为true。嘿@Herm，你能再检查一下吗。我已经编辑了它，它工作得很好。@DPT…谢谢更新。我已经更新了反对票。但还是不行
if ($(CheckboxInput).is(':checked')) {
  CheckboxInput.prop('checked', false);
}

CheckboxInput.prop('checked', !$(CheckboxInput).is(':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');
    }
  });
});