我怎樣才能只選擇一個單選按鈕？

Question

我正在創建審閱控件，並使用單選按鈕來選擇等級。我寫了一些簡單的js來添加一個不同的類，當一個單選按鈕被選中時。

問題是您可以檢查每個單選按鈕，我希望用戶只檢查一個值。我用javascript編寫這個，但歡迎jQuery或smartare解決方案。

演示：http://jsfiddle.net/cbqt8/5/

HTML：

<div class="reviews"> 
<label class="input-check"> 
    <input onchange="change_state(this)" type="radio" value="1" name="review[rating]" /> Bad 
</label> 
<label class="input-check"> 
    <input onchange="change_state(this)" type="radio" value="2" name="review[rating]" /> Its okey 
</label> 
<label class="input-check"> 
    <input onchange="change_state(this)" type="radio" value="3" name="review[rating]" /> Great 
</label> 
<label class="input-check"> 
    <input onchange="change_state(this)" type="radio" value="4" name="review[rating]" /> Awesome 
</label> 
<label class="input-check"> 
    <input onchange="change_state(this)" type="radio" value="5" name="review[rating]" />Super 
</label> 
</div> 

的JavaScript：

function change_state(obj) { 
    if (obj.checked) { 
     //if radiobutton is being checked, add a "checked" class 
     obj.parentNode.classList.add("checked"); 
    } 
    else { 
     //else remove it 
     obj.parentNode.classList.remove("checked"); 
    } 
} 

CSS：

/*reviews box*/ 
.reviews{ 
    padding: 25px; 
    margin:0; 
} 
/*this is the style of an radio "button"*/ 
.input-check { 
    display: inline-block; 
    height:20px; 
    padding:5px 8px; 
    background:green; 
    width:90px; 
    color:white; 
    text-align: center; 
} 
/* This is the style for a radio "button" */ 
.input-check.checked{ 
    background:red; 
    color:black; 
    font-weight:bold; 
} 
/*Hide the radiobutton*/ 
.input-check input { 
    display:none; 
} 

Answer 1

你必須刪除checked類先前檢查項目。

的jsfiddle：http://jsfiddle.net/P8jB8/

function change_state(obj) { 

    if (obj.checked) { 
     var checkedNodes = getElementsByClassName(document, "checked"); 
     for (var i=0;i<checkedNodes.length;i++) { 
      checkedNodes[i].classList.remove("checked"); 
     } 

     //if radiobutton is being checked, add a "checked" class 
     obj.parentNode.classList.add("checked"); 
    } 
    else { 
     //else remove it 
     obj.parentNode.classList.remove("checked"); 
    } 
} 

function getElementsByClassName(node,classname) { 
    if (node.getElementsByClassName) { // use native implementation if available 
    return node.getElementsByClassName(classname); 
    } else { 
    return (function getElementsByClass(searchClass,node) { 
     if (node == null) 
      node = document; 
     var classElements = [], 
      els = node.getElementsByTagName("*"), 
      elsLen = els.length, 
      pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j; 

     for (i = 0, j = 0; i < elsLen; i++) { 
      if (pattern.test(els[i].className)) { 
       classElements[j] = els[i]; 
       j++; 
      } 
     } 
     return classElements; 
    })(classname, node); 
    } 
}