HTML使常规按钮的行为类似于一组单选按钮

Question

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 like to avoid adding another library to my project. Any idea how this could be done using pure HTML + javascript/jQuery ?

Thanks in advance

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

Answer 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 = new RegExp('(^|\\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 = new RegExp('(^|\\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 = new RegExp('(^|\\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:

<style type="text/css">
.pressed {background-color: red}
</style>

<script type="text/javascript" src="min.js"></script>

<script type="text/javascript">
function buttonLike(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>

<button class="radio" onclick="buttonLike(this)">one</button>
<button class="radio" onclick="buttonLike(this)">two</button>
<button class="radio" onclick="buttonLike(this)">three</button>
<button class="radio" onclick="buttonLike(this)">four</button>
<button class="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.

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