HTML 일반 버튼을 라디오 버튼 그룹처럼 동작 시키십시오.

Question

"일반"버튼을 라디오 버튼 그룹처럼 작동시키고 싶습니다.

나는 내가 원하는 것을 정확하게 수행하는 jQueryUI 플러그인 발견 http://jqueryui.com/demos/button/#radio

을하지만 내 프로젝트에 다른 라이브러리를 추가하지 싶습니다. 어떻게 순수 HTML + 자바 스크립트/jQuery를 사용하여이 작업을 수행 할 수 있습니까? 사전에

감사

Answer 1

데모 : .button 당신이 포함해야 모든 버튼에 대한 귀하의 마커 클래스입니다 http://jsfiddle.net/CXrgm/6

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

, 버튼을 선택 나타냅니다있다 whitch .active 클래스입니다.

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

Answer 2

jQuery를 UI가 공식 사용자 인터페이스 플러그인 jQuery를위한이다 :

선택한 버튼의 사용을 얻을 수 있습니다. 이를 프로젝트에 안전하게 추가 할 수 있습니다. 완벽하게 맞을 것이라고 확신합니다. 응용 프로그램의 다른 곳에서도 다양한 기능을 사용할 수있을 것입니다.

jQuery와 jQuery UI는 모두 Microsoft's 또는 Google's과 같이 다양한 콘텐츠 전달 네트워크 (CDN)에 분산되어 있으므로로드 시간이나 대역폭 비용에 대해 걱정할 필요가 없습니다.

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

을 다음과 같이 버튼의 일을 : 당신이 일반 JS 버전을 원하는 경우

Answer 3

, 당신은 다음 (현실을 부르 자하는 min.js) 등 자신의 작은 도서관을 구축 할 수 있습니다

<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 함수가 필요하지만 라이브러리 부분에는 몇 줄 밖에 없습니다.

이벤트 위임을 사용할 수도 있으므로 하나의 수신기 만 필요합니다.