1

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

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，我都会得到该复选框的值。我想过以这种方式尝试它，但是当我使用“onclick”时我需要它来处理一个函数，所以我被卡住了。

请帮忙。我会在我能回答这个问题的地方给 + 代表。

4

5 回答 5

3

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

只需最少的更改，您就可以执行类似的操作：

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

更新您的绑定代码以包含以下内容：

onclick = 'createAlerts(this)'

演示- 使用纯 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 准备好时，使用 绑定 click 事件on()，类似于：

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

演示- 使用 jQueryon()

该createAlerts函数仍然直接使用，因为在访问本机属性时this不需要额外的在元素周围包装 jQuery 选择器的开销。$(this)

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

上面使用on()委托，将点击事件绑定到最近的静态父元素，假设上面#tablespace但针对动态生成的复选框。

if#tablespace也是动态使用$(document).on(....)or$('body').on(....)代替。

于 2013-07-29T22:05:04.127 回答
1

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

这也适用于动态添加的元素

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

});
于 2013-07-29T22:04:25.503 回答
1

因为您的输入是在 dom 之后添加的，所以您不能直接调用它们。.on可以委托。所以试试这个代码：

function createAlerts()
{
     $(document).on('change',input[type=checkbox],function(){
         if( $(this).is(':checked'))
         {
             alert($(this.).val());
         }
    });
}
于 2013-07-29T22:04:50.013 回答
1

我只想给它上课....

在这一行...

 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);
于 2013-07-29T22:08:15.330 回答
1

您可以将处理程序绑定到复选框上的单击事件，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");
});
于 2013-07-29T22:23:39.290 回答