Javascript 如何使用Prototype检查单选按钮是否具有“checked”属性
我有一段代码,可以检查包含单选按钮输入的LI标记的列表。我有一些聪明的逻辑,通过巧克力芯片Javascript框架库计算出当点击一个LI时,它将应用一个相关的类来显示选中的单选按钮 然而,我想扩展这个逻辑,这样它可以更深入地挖掘LI,找到哪个单选按钮输入是在任何用户在加载页面时选择任何内容之前已经选择的,并对其应用一个类,以便它立即突出显示已经选择的内容 我是一个有点新的原型,所以我不知道什么是最好的方法来做到这一点,所以将感谢任何帮助你可以提供 在下面的例子中,我想选择按钮3 JSIDLE链接: HTML: 谢谢Javascript 如何使用Prototype检查单选按钮是否具有“checked”属性,javascript,prototypejs,Javascript,Prototypejs,我有一段代码,可以检查包含单选按钮输入的LI标记的列表。我有一些聪明的逻辑,通过巧克力芯片Javascript框架库计算出当点击一个LI时,它将应用一个相关的类来显示选中的单选按钮 然而,我想扩展这个逻辑,这样它可以更深入地挖掘LI,找到哪个单选按钮输入是在任何用户在加载页面时选择任何内容之前已经选择的,并对其应用一个类,以便它立即突出显示已经选择的内容 我是一个有点新的原型,所以我不知道什么是最好的方法来做到这一点,所以将感谢任何帮助你可以提供 在下面的例子中,我想选择按钮3 JSIDLE链接
-JaXL谢谢发条怪。这正是我想要的,但当我使用该代码时,它不起作用。你知道为什么吗?确保你使用的浏览器都是现代浏览器的控制台,并在代码中加入一些console.logitem类型的调用。另外,在控制台中尝试键入$$'.radioList li input[checked]',如果类名或类似内容没有问题,您应该会看到选中控件的列表。
<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>
$.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);
}
});
});
};
$.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');
}
});
};