small reusable function for toggling the visual state of bootstrap button groups, and returning a value based on the selected one. The idea is if it is checkbox we toggle its visual state by changing the background and changing the icon on the button. If it is a radio button group we just change the icon on the target button and reset the icon o…

bs_btn_gr_tog.js

self.cbTog = function(b) {
    var self = this;

    var gs = $(b).parent('label').siblings().length;
    // console.log($(b).parent('label').siblings().length);
    
    if (gs > 0) {
      // This is a multi option item, mostlikely a radio.
      $(b)
        .siblings('i')
        .addClass('fa-check-square-o')
        .removeClass('fa-square-o')
        .closest('label')
        .css('padding-right', '3px')
        .siblings()
        .each(function() {
          $(this)
            .css('padding-right', '5px')
            .find('i')
            .filter('.fa-check-square-o')
            .addClass('fa-square-o')
            .removeClass('fa-check-square-o');
        });
      // return the value based on the type.
      // In this case we have some id's that end with yes, no or na, if the target maches them we return 1, 2 or 3.
      // If nothing matches we return null.
      return $(b).is('[id$="yes"]') ? 1 : $(b).is('[id$="no"]') ? 2 : $(b).is('[id$="na"]') ? 3 : null;
    }
    else {
      // This is a checkbox
      if ($(b).is(':checked')) {
        $(b)
          .siblings('i')
          .addClass('fa-square-o')
          .removeClass('fa-check-square-o')
          .closest('label')
          .css('padding-right', '5px')        
          .addClass('btn-danger')
          .removeClass('btn-success')
          .filter('.btn-info')
          .removeClass('btn-success btn-warning btn-danger');
        return 0;
      }
      else {
        $(b)
          .siblings('i')
          .addClass('fa-check-square-o')
          .removeClass('fa-square-o')
          .closest('label')
          .css('padding-right', '3px')
          .addClass('btn-success')
          .removeClass('btn-danger btn-warning')
          .filter('.btn-info')
          .removeClass('btn-success btn-warning btn-danger');
        return 1;
      }
    }    
  }