Question

我有一个名为＆＃34; ReportTypeId＆＃34;的单选按钮列表。对于每个radio按钮，我想在点击时显示带有值的提醒。

我编写了以下jQuery，它将列表中的所有5个单选按钮命名为＆＃34; ReportTypeId＆＃34;：

$("[name='ReportTypeId']").toArray().forEach(function(reportTypeId){
    reportTypeId.click(function(reportTypeId){
       alert(reportTypeId.value);
    });
});

当我设置断点并在加载时检查变量时，变量看起来像预期的那样。但是，当我在页面加载后单击单选按钮时没有任何反应。我在上面的jquery中做错了什么？

Answer 1

您应该使用this将回调函数中的当前元素转换为.click()。传递给function的参数实际上是click事件对象。

$("[name='ReportTypeId']").toArray().forEach(function(reportTypeId){
    reportTypeId.click(function(event){
        alert(this.value);
    });
});

通过在jQuery集合上调用.click()，您可以简化代码。事件侦听器将自动附加到集合中的所有元素。

$("[name='ReportTypeId']").click(function(event){
    alert(this.value);
});

Answer 2

您可以同时将点击事件附加到所有按钮，因为它们具有相同的名称ReportTypeId，您不需要使用.forEach()并循环...然后获取值使用.val()：

$("body").on('click', '[name='ReportTypeId']', function(){
     alert($(this).val());
});

希望这有帮助。

＆＃13;

$("body").on('click', '[name="ReportTypeId"]', function(){
     alert($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='ReportTypeId' value='radio_1' checked/> Radio 1
<br>
<input type='radio' name='ReportTypeId' value='radio_2'/> Radio 2
<br>
<input type='radio' name='ReportTypeId' value='radio_3'/> Radio 3
<br>
<input type='radio' name='ReportTypeId' value='radio_4'/> Radio 4

＆＃13;

Answer 3

试试这个：

$("[name='ReportTypeId']").click(function(){
    alert(this.value);
});

在函数回调中使用它，你不必使用toArray（）

Answer 4

reportTypeId.value可能未定义，因此不会显示任何警报。

未定义，因为默认情况下，click事件回调函数中的第一个参数是event对象，而不是单选按钮本身。尝试提醒this.value而不是reportTypeId.value。

为什么这个jquery事件处理程序没有按预期连接？

4 个答案: