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

我希望得到一些“常规”按钮，就像一组单选按钮一样。

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

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

提前致谢

Answer 1

演示： http ： //jsfiddle.net/CXrgm/6

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

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

要使用所选按钮：

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

Answer 2

如果你想要一个普通的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 

然后做按钮之类的事情：

    one two three four five 

库代码只是从现有的可重用代码中剪切和粘贴，手动代码部分仅略高于各种库的代码。 需要一个小的addListener函数，但这只是库部分中的几行。

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

Answer 3

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

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