使用原型JS观察单选按钮选择的变化

我对Prototype JS（v1.7）相对较新，而且我被困在某些东西上。我试图检测何时发生单选按钮选择的改变。下面的代码：使用原型JS观察单选按钮选择的变化

单选按钮：

<input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />

的Javascript：这里有一个刺我接过它，它不工作：

Event.observe($$('amounts'), 'change', function(event) { 
    alert('change detected'); 
});

加载窗体时，没有单选按钮被检查。我想的JavaScript来检测这些事件：
1）一种单选按钮被选中时没有先前选择
2）无线按钮选择改变

任何帮助，将不胜感激。谢谢！

罗汉

来源

2011-03-10 Rohan

一旦您有适合您的工具，请务必点击选中标记接受答案！ – 2011-03-15 15:11:22

它不工作，因为$$返回元素和Event的数组需要一个单一的元素。 $$('amounts')也不匹配任何元素，也没有<amounts>标签。

更好的方法是使用易于识别的单个祖先元素。

<form id="amounts-form"> 
    <input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
    <input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
    <input class="amounts" type="radio" name="amount" id="amount-3" value="3" /> 
</form>

现在有一个唯一的ID的工作与我们可以使用Event.on

$('amounts-form').on('change', '.amounts', function(event) { 
    alert('change detected'); 
});

通知正在'.amounts'过滤事件，期间说，使用类名。
如果您使用FireBug for FireFox或Chrome的开发人员工具，则可以直接在控制台中测试脚本的部分内容。通过键入$$('.amounts')

来源

2011-03-10 11:38:30 clockworkgeek

其更有效地只给那些复选框同一类但你也可以尝试

$("id^=amounts-").change(function(){alert("blah blah")})

来源

2011-03-10 06:00:03 Alternegro

Alternegro的答案尝试使用迭代器将事件处理程序直接附加到“数量”无线电元素，但不适用于几个原因：

“$”函数不会将css选择器作为参数，只有id。改用“$$”。
css“id”属性选择器应该包含方括号“[]”。它也拼错了。 “金额 - ”应该是“金额 - ”以匹配示例中的ID。或者只是使用类选择器：“.amounts”。
没有可以在枚举上调用的“更改”方法。改用invoke或其他可枚举的方法。

这一个应该工作：

$$("[id^=amount-]").invoke(
    'on', 
    'change', 
    function(){alert("hello " + this.id)} 
)

（因人而异 “这个”，在事件处理程序使用。我只在Firefox中检查了代码）

来源

2011-03-17 20:02:56 benrifkah

使用原型JS观察单选按钮选择的变化

回答

相关问题