Uncheck or turn off all checkbox based toggle switches when a new one is turned on?

问题

I am using some CSS3 toggle switches in a project of mine and they are currently toggling just fine, but what i would like to have happen is for all other toggles to turn off when a new one is activated. Can anyone help get me started on this. I am not even sure where to start. These are the toggles I am using:

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

is there a way for Javascript to be able to do this? Any guidance would be helpful.

回答1:

If you're using jQuery, this will do the trick:

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

See the demo using the example html/css in your link here: http://codepen.io/anon/pen/MymGqP.

回答2:

Without knowing too much about your project, one solution could be to use radio buttons instead of checkboxes for your toggle switches. That way, the default behaviour of the radio buttons will deselect the other/s when a new one is activated.

来源：https://stackoverflow.com/questions/36192286/uncheck-or-turn-off-all-checkbox-based-toggle-switches-when-a-new-one-is-turned