如何检查单选按钮是否具有'检查'属性原型

Question

我有一些代码检查列表是否包含单选按钮输入的LI标签。我通过巧克力的JavaScript框架库有一些聪明的逻辑来解决单击LI时，它将应用相关的类来显示已选择的单选按钮。

但是，我想扩展该逻辑，以便深入挖掘LI，并找到在页面加载并应用类时，哪个单选按钮输入是已选择的（在任何用户选择任何内容之前）它可以即时突出显示已经选择的内容。

我对Prototype有点新，所以我不确定什么是最好的方法来做到这一点，所以将不胜感激您可以提供任何帮助。

所以在下面的情况下，我想挑出按钮3.

的jsfiddle链接：http://jsfiddle.net/Qw6KA/

HTML：

<ul class="radioList"> 
    <li> 
     <input type="radio" id="radio1" name="radioButton" value="Button 1"> 
     <label for="radio1">Button 1</label> 
    </li> 
    <li> 
     <input type="radio" id="radio2" name="radioButton" value="Button 2"> 
     <label for="radio2">Button 2</label> 
    </li> 
    <li> 
     <input type="radio" id="radio3" name="radioButton" value="Button 3" checked="checked"> 
     <label for="radio3">Button 3</label> 
    </li> 
    <li> 
     <input type="radio" id="radio4" name="radioButton" value="Button 4"> 
     <label for="radio4">Button 4</label> 
    </li> 
</ul> 

JS（原型）：

$.RadioButtons = function(viewSelector, callback) { 
    var items = viewSelector + ".radioList li"; 
    var radioButtons = $$(items); 
    radioButtons.forEach(function(item) { 
     item.bind("click", function() { 
      radioButtons.forEach(function(check) { 
       check.removeClass("selected"); 
      }); 
      this.addClass("selected"); 
      this.last().checked = true; 
      if (callback) { 
       callback(item); 
      } 
     }); 
    }); 
}; 

谢谢 -JaXL

Answer 1

$.RadioButtons = function(viewSelector, callback) { 
    var items = viewSelector + ".radioList li"; 
    var radioButtons = $$(items); 
    radioButtons.forEach(function(item) { 
     item.bind("click", function() { 
      radioButtons.forEach(function(check) { 
       check.removeClass("selected"); 
      }); 
      this.addClass("selected"); 
      this.last().checked = true; 
      if (callback) { 
       callback(item); 
      } 
     }); 

     // Add this bit 
     if (item.select('input[checked]').length) { 
      item.addClassName('selected'); 
     } 
    }); 
};