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

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

el = els[i];

if (el.className && re.test(el.className)) {

a.push(el);

}

}

return a;

}

然后执行按钮操作：

.pressed {background-color: red}

function buttonLike(el) {

var els = util.dom.getElementsByClassName('radio');

for (var i=0, iLen=els.length; i

util.dom.removeClassName(els[i], 'pressed');

}

util.dom.addClassName(el, 'pressed');

}

one

two

three

four

five

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

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