Html Make Regular Buttons Act Like A Group Of Radio Buttons

I want to get some 'regular' buttons to act like a group of radio buttons. I found a jQueryUI plugin that does exactly what I want: http://jqueryui.com/demos/button/#radio But I'd

Solution 1:

demo: http://jsfiddle.net/CXrgm/6

$('.button').click(function() {
   $('.button').removeClass('active');
   $(this).addClass('active');
});

where .button is your marker class for all buttons you need to include, and .active class whitch is indicate selected button.

to get the selected button use:

$('.button.active') // get attribute value, etc. Whatever you need.

Solution 2:

If you want a plain js version, you can build your own small library like the following (let's call it min.js):

var util = util || {};

util.trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

util.dom = {};

util.dom.hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = newRegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

util.dom.addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!util.dom.hasClassName(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
}

util.dom.removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (util.dom.hasClassName(el, cName)) {
        var re = newRegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}


util.dom.getElementsByClassName = function(cName, root) {
  root = root || document.body;
  if (root.querySelectorAll) {
    return root.querySelectorAll('.' + cName);
  }

  var el, els = root.getElementsByTagName('*');
  var a = [];
  var re = newRegExp('(^|\\s)' + cName + '(\\s|$)'); 

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];

    if (el.className && re.test(el.className)) {
      a.push(el);
    }
  }
  return a;
}

and then do the button thing like:

<styletype="text/css">.pressed {background-color: red}
</style><scripttype="text/javascript"src="min.js"></script><scripttype="text/javascript">functionbuttonLike(el) {
  var els = util.dom.getElementsByClassName('radio');
  for (var i=0, iLen=els.length; i<iLen; i++) {
    util.dom.removeClassName(els[i], 'pressed');
  }
  util.dom.addClassName(el, 'pressed');
}
</script><buttonclass="radio"onclick="buttonLike(this)">one</button><buttonclass="radio"onclick="buttonLike(this)">two</button><buttonclass="radio"onclick="buttonLike(this)">three</button><buttonclass="radio"onclick="buttonLike(this)">four</button><buttonclass="radio"onclick="buttonLike(this)">five</button>

The library code is just cut and paste from existing reusable code, the hand code part is only marginally more than that for various libraries. Needs a small addListener function, but that's only a few more lines in the library part.

Event delegation could also be used so only one listener is required.

Solution 3:

jQuery UI is the official user-interface plug-in for jQuery. You can safely add this to your project. I'm sure it will be a perfect fit, and I'm sure you will find use for the various features elsewhere in your application.

Both jQuery and jQuery UI are distributed across various Content Delivery Networks (CDNs), like Microsoft's or Google's, so you don't have to worry all that much about load-times or bandwidth costs.