如何使用onclick函数创建动态复选框警报？

Question

我有下面的函数在表中创建多个复选框。 问题：我无法获得检查每个框的值。

function createRoutesTable(result) 
    { 
     var length = result.jsonList.length; 
     var tablecontents = ""; 
     console.log(length); 
     tablecontents ="<table>"; 
     for(var i = 0; i < length; i++) 
     { 
      tablecontents += "<tr>" 
      tablecontents += "<td><input type='checkbox' id='checkbox_"+ i + "' value='" + result.jsonList[i].Id +"' onclick = 'createAlerts()'><td>" 
      tablecontents += "</tr>" 
     } 
     tablecontents +="</table>"; 
     document.getElementById("tablespace").innerHTML = tablecontents; 

    } 

这里是我下面的功能：

function createAlerts() 
{ 

    if($('#checkbox_1').is(':checked')) 
    { 
     alert($(this).val()); 
    } 

} 

这将为第一个框工作，但我需要为每次我点击任何对话框的方法，它会抢了适当的值。我真的不想写脆弱的代码，并为我创建的每个复选框写if语句。这真的很糟糕。换句话说，不管我点击checkbox_3或checkbox_6，我都会得到该复选框的值。我想过尝试这个way，但当我使用“onclick”时，我需要使用这个功能，所以我被卡住了。

请帮忙。如果我能回答这个问题，我会给+代表。

Answer 1

鉴于您在其他地方使用普通JavaScript，为什么不坚持使用它？将当前复选框作为参数传递。

有了你可以做同样的事情到这个变化量最少的：

function createAlerts(theCheckbox) { 
    if (theCheckbox.checked) { 
     alert(theCheckbox.value); 
    } 
} 

更新你的绑定代码，以将此：

onclick = 'createAlerts(this)' 

---

DEMO - 使用普通的JavaScript

---

要么使用jQuery，要么使用普通的JavaScript，但是混合使用getElementById和jQuery选择器在长期维护代码时不会造成混淆。

如果您想为绑定使用更多面向jQuery的解决方案，您可以使用on()和委托。

jQuery在这种情况下将this的上下文设置为单击元素，因此您不需要手动传递参数，与此类似。

function createAlerts() { 
    if (this.checked) { 
     alert(this.value); 
    } 
} 

然后，您可以更改当前绑定功能，而忽略了内联createAlert结合，与此类似：

function createRoutesTable(result) { 
    var length = result.jsonList.length; 
    var tablecontents = ""; 
    console.log(length); 
    tablecontents = "<table>"; 
    for (var i = 0; i < length; i++) { 
     tablecontents += "<tr>" 
     tablecontents += "<td><input type='checkbox' id='checkbox_"+ i + "' value='" + result.jsonList[i].Id +"'><td>" 
     tablecontents += "</tr>" 
    } 
    tablecontents += "</table>"; 
    document.getElementById("tablespace").innerHTML = tablecontents; 
} 

然后当DOM准备好使用on()，类似这样的单击事件绑定：

$(document).ready(function() { 
    $('#tablespace').on('click', 'table tr td [id^="checkbox_"]', createAlerts); 
}); 

---

DEMO - 美国荷兰国际集团的jQuery on()

---

的createAlerts函数仍使用this直接，因为没有必要在访问本机属性时的元件$(this)周围缠绕jQuery选择的额外开销。

^是attribute-starts-with selector，在动态生成的table tr td中选择以id为checkbox_开头的任何元素。

以上使用on()带有委托，将click事件绑定到最近的静态父元素，假设在#tablespace以上，但是锁定了动态生成的复选框。

如果#tablespace也是动态使用$(document).on(....)或$('body').on(....)代替。

Answer 2

只要使用jQuery来绑定事件。并删除内联事件绑定到它。

这也应该适用于动态添加元素

$(document).on('click', '[id^=checkbox]', function() { 
    if($(this).is(':checked')) // or this.checked 
    { 
     alert($(this.).val()); 
    } 

}); 

Answer 3

因为你投入了DOM之后添加你不能直接给他们打电话。 .on可以委托。因此，请尝试以下代码：

function createAlerts() 
{ 
    $(document).on('change',input[type=checkbox],function(){ 
     if($(this).is(':checked')) 
     { 
      alert($(this.).val()); 
     } 
    }); 
} 

Answer 4

我只想给它一个类....

在这一行...

tablecontents += "<td><input type='checkbox' class='check' id='checkbox_"+ i + "' value='" + result.jsonList[i].Id +"'><td>" 

在你的jQuery

$(document).on('click','.check', function(){ 
    if($(this).is(':checked')){ 
    alert($(this).val());} 
    }); 

或与您的功能

则...

$(document).on('click','.check', createAlerts); 

Answer 5

您可以将处理程序绑定到cl ick事件在你的复选框，jquery还支持委托事件处理程序（使用.on（）），它允许您绑定到选择器上的所有匹配，即使在调用后创建新节点。

下面是一个例子：http://jsfiddle.net/jbergler/JzQJg/

//dynamically bind to any 'checkbox' elements for a click handler 
$(document).on("click", ":checkbox", function (e) { 
    var checked = $(this).is(":checked") ? "yes" : "no"; 
    $("#log").append("Click on element: " + $(this).attr('id') + " Checked: " + checked + "\n"); 
});