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

我想让一些“常规”按钮像一组单选按钮一样工作

我发现了一个jQueryUI插件，它完全符合我的要求：

但我希望避免在我的项目中添加另一个库。你知道如何使用纯HTML+javascript/jQuery实现这一点吗

提前感谢演示：

其中，

.button

是您需要包含的所有按钮的标记类，而

.active

是指示所选按钮的类

要获取所选按钮，请使用：

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

---

jQuery UI是jQuery的官方用户界面插件。您可以安全地将其添加到项目中。我相信这将是一个完美的适合，我相信你会发现你的应用程序中其他地方的各种功能的使用

---

jQuery和jQuery UI都分布在不同的内容交付网络（CDN）上，如或，因此您不必太担心加载时间或带宽成本。

如果您想要一个简单的js版本，您可以构建自己的小型库，如下所示（我们称之为min.js）：

var util=util | |{}；
util.trim=函数{
返回s.replace（/（^\s+）|（\s+$）/g'，）.replace（/\s+/g'，）；
}
util.dom={}；
util.dom.hasClassName=函数（el，cName）{
if（typeof el=='string'）el=document.getElementById（el）；
var re=new RegExp（“（^ s+”+cName+”（\\s+））；
返回el和re.test（el.className）；
}
util.dom.addClassName=函数（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=函数（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=函数（cName，根）{
root=root | | document.body；
if（root.queryselectoral）{
返回root.querySelectorAll（'.'+cName）；
}
var el，els=root.getElementsByTagName（'*'）；
var a=[]；
var re=new RegExp（“（^ |\\s）+cName+”（\\s |$）；
对于（变量i=0，iLen=els.length；i
$('.button.active') // get attribute value, etc. Whatever you need.

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;
}

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