我有下面的函数在表中创建多个复选框。 问题：我无法检查每个框的值。
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”时，我需要使用这个功能，所以我被卡住了。
请帮忙。 如果我能回答这个问题，我会给+代表。
I have the following function below that creates multiple check boxes in a table. Problem: I cannot get the value for each box checked.
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; }Here is my function below:
function createAlerts() { if( $('#checkbox_1').is(':checked')) { alert($(this).val()); } }This will work for the first box, but I need a way for everytime I click any box, it will grab the appropriate value. I really don't want to have to write brittle code and write this if statement for each checkbox I created. That's really bad.
Put another way, no matter if I click checkbox_3 or checkbox_6, I will get the value for that checkbox. I thought about trying it this way, but I need this to work with a function when I use "onclick", so I got stuck.
Please help. I will give + rep where I can on responses to this question.
最满意答案
鉴于你在其他地方使用普通的JavaScript，为什么不坚持呢？ 将当前复选框作为参数传递。
用最少的改变，你可以做类似这样的事情：
function createAlerts(theCheckbox) { if (theCheckbox.checked) { alert(theCheckbox.value); } }更新你的绑定代码来包含这个：
onclick = 'createAlerts(this)'演示 - 使用普通的JavaScript
无论是使用jQuery还是纯JavaScript，但在长期维护代码时混合使用getElementById和jQuery选择器都不会令人困惑。
如果您想为绑定使用更多面向jQuery的解决方案，您可以在代理上使用on（） 。
在这种情况下，jQuery将此上下文设置为clicked元素，因此您不需要手动传递参数，与此类似。
function createAlerts() { if (this.checked) { alert(this.value); } }然后，您可以更改当前的绑定函数，而createAlert内联的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 - on()使用jQuery
createAlerts函数仍然直接使用this ，因为在访问本地属性时，不需要在元素$(this)周围包装jQuery选择器的额外开销。
^是attribute-starts-with选择器 ，在动态生成的table tr td选择任何以checkbox_开头的元素。
上面的代码使用on()和委托，将click事件绑定到最近的静态父元素，假设在#tablespace但是在内部定位了动态生成的复选框。
如果#tablespace也是动态使用$(document).on(....)或$('body').on(....) 。
Given you are using plain JavaScript everywhere else, why not stick with it? Pass the current checkbox as a parameter.
With the least amount of change you can do something similar to this:
function createAlerts(theCheckbox) { if (theCheckbox.checked) { alert(theCheckbox.value); } }Update your binding code to include this:
onclick = 'createAlerts(this)'DEMO - Using plain JavaScript
Either go with jQuery or plain JavaScript but mixing getElementById and jQuery selectors is more than confusing when maintaining the code in the long run.
If you want to use a more jQuery orientated solution for the binding you can use on() with delegation.
jQuery in this case sets the context of this to the clicked element so you don't need to manually pass the parameter, similar to this.
function createAlerts() { if (this.checked) { alert(this.value); } }You can then change your current binding function, leaving out the inline createAlert binding, similar to this:
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; }Then when the DOM is ready bind the click event using on(), similar to this:
$(document).ready(function () { $('#tablespace').on('click', 'table tr td [id^="checkbox_"]', createAlerts); });DEMO - Using jQuery on()
The createAlerts function still uses this directly as there is no need for the additional overhead in wrapping a jQuery selector around the element $(this) when accessing native attributes.
The ^ is the attribute-starts-with selector, selecting any element starting with an id of checkbox_ inside a dynamically generated table tr td.
The above uses on() with delegation, binding the click event to the closest static parent element, assuming above #tablespace but targeting the dynamic generated checkboxes within.
If #tablespace is also dynamic use $(document).on(....) or $('body').on(....) instead.
更多推荐
function,tablecontents,value,onclick,电脑培训,计算机培训,IT培训"/> <meta nam
发布评论