HTML使常規按鈕的行爲像一組單選按鈕

Question

我想獲得一些「常規」按鈕以像一組單選按鈕。

我發現了一個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類whitch的指示選擇按鈕。

獲得所選擇的按鈕使用：

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

Answer 2

jQuery UI的是官方用戶界面插件的jQuery。您可以安全地將其添加到您的項目中。我相信它會是一個完美的結合，我相信你會發現你的應用程序中的其他功能可以使用它。

jQuery和jQuery UI都分佈在各種內容分發網絡（CDN）中，如Microsoft's或Google's，所以您不必擔心所有關於加載時間或帶寬成本的問題。

Answer 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函數，但這只是庫部分中的幾行。

也可以使用事件委託，因此只需要一個偵聽器。