HTML使常规按钮像一组单选按钮一样

HTML make regular buttons act like a group of radio buttons

本文关键字：一组 单选按钮 一样 常规 HTML 按钮      更新时间：2023-09-26

我想让一些"常规"按钮像一组单选按钮一样。

我找到了一个jQueryUI插件，它完全符合我的要求:http://jqueryui.com/demos/button/#radio

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

Thanks in advance

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

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

其中.button是您需要包含的所有按钮的标记类，.active类表示选中的按钮。

获取选定按钮使用:

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

如果你想要一个纯js版本，你可以像下面这样构建你自己的小库(我们叫它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;
}

然后是按钮，比如

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

库代码只是从现有的可重用代码中剪切和粘贴，手工代码部分只比其他库稍微多一点。需要一个小的addListener函数，但是在库部分只需要增加几行代码。

也可以使用事件委托，这样只需要一个侦听器。

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

jQuery和jQuery UI都分布在不同的内容分发网络(cdn)上，比如微软的或谷歌的，所以你不必担心加载时间或带宽成本。

相关文章：