css - 打开新开关时，取消选中或关闭所有基于复选框的切换开关？

Question

我在我的一个项目中使用了一些 CSS3 拨动开关，它们目前切换得很好，但我希望发生的事情是在激活新的拨动开关时关闭所有其他拨动开关。任何人都可以帮助我开始这件事。我什至不知道从哪里开始。这些是我正在使用的切换：

http://wsnippets.com/styling-checkbox-toggle-switches-css3/

有没有办法让Javascript能够做到这一点？任何指导都会有所帮助。

Answer 1

如果您使用的是 jQuery，这将解决问题：

$(function() {
  $('.checkbox-switch input').change(function() {
    if($(this).prop('checked')) {
      $(".checkbox-switch input").prop('checked', false);
      $(this).prop('checked', true);
    }
  });
});

在您的链接中查看使用示例 html/css 的演示：http: //codepen.io/anon/pen/MymGqP。

Answer 2

在对您的项目了解不多的情况下，一种解决方案可能是使用单选按钮而不是复选框来切换切换开关。这样，当激活新的单选按钮时，单选按钮的默认行为将取消选择其他/s。