Search code examples
csscheckboxtoggletoggleswitch

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.

Solution

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