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

【问题标题】：HTML make regular buttons act like a group of radio buttonsHTML 使常规按钮的行为类似于一组单选按钮
【发布时间】：2011-11-20 21:46:26
【问题描述】：

我想要一些“常规”按钮来充当一组单选按钮。

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

但我想避免在我的项目中添加另一个库。知道如何使用纯 HTML + javascript/jQuery 来完成吗？

提前致谢

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

演示：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.

【讨论】：

【解决方案2】：

jQuery UI 是 jQuery 的官方用户界面插件。您可以安全地将其添加到您的项目中。我相信它会非常适合，而且我相信您会发现应用程序中其他地方的各种功能都可以使用。

jQuery 和 jQuery UI 都分布在各种内容交付网络 (CDN) 中，例如 Microsoft's 或 Google's，因此您不必担心加载时间或带宽成本。

【讨论】：

【解决方案3】：

如果你想要一个普通的 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 函数，但这只是库部分中的几行。

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

【讨论】：