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

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

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