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，在动态生成的checkbox_中选择ID为table tr td的任何元素。

以上使用带有委托的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

您可以将处理程序绑定到复选框上的click事件，jquery还支持委托事件处理程序（使用.on（）），即使在调用之后创建了新节点，也可以绑定到选择器上的所有匹配项。 / p>

以下是一个示例：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");
});

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

5 个答案: