使用 Prototype JS 观察单选按钮选择的变化答案

【问题标题】：Observing change in radio button selection using Prototype JS使用 Prototype JS 观察单选按钮选择的变化
【发布时间】：2011-07-12 11:19:14
【问题描述】：

我对 Prototype JS (v1.7) 比较陌生，但我遇到了一些问题。我试图检测单选按钮选择何时发生变化。代码如下：

单选按钮：

<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 检测这些事件：

以前未选择单选按钮时选择了单选按钮
单选按钮选择发生变化

任何帮助将不胜感激。

【问题讨论】：

一旦找到适合您的答案，请务必点击复选标记接受答案！

标签： javascript html prototypejs dom-events

【解决方案1】：

它不起作用，因为$$ 返回一个元素数组，而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') 来查找选择器是否与您认为的元素匹配真的很有帮助

【讨论】：

【解决方案2】：

Alternegro 的回答尝试使用迭代器将事件处理程序直接附加到“数量”单选元素，但由于以下几个原因不起作用：

“$”函数不将 css 选择器作为参数，只有 id。请改用“$$”。
css“id”属性选择器应包含方括号“[]”。它也拼写错误。 "amounts-" 应该是 "amount-" 以匹配示例中的 id。或者只使用类选择器：“.amounts”。
没有可对枚举调用的“更改”方法。请改用调用或其他一些可枚举的方法。

这个应该可以的：

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

（YMMV 在事件处理程序中使用“this”。我只检查了 Firefox 中的代码）

【讨论】：

【解决方案3】：

将这些复选框赋予相同的类更有效，但你也可以尝试

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

【讨论】：