javascript - 使用 Prototype JS 观察单选按钮选择的变化

Question

我是 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 检测这些事件:

1. 以前没有选择单选按钮时选择单选按钮
2. 单选按钮选择发生变化

如有任何帮助，我们将不胜感激。

Answer 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') 来查找选择器是否匹配您认为的元素确实很有帮助。