获取由HTML表格中的chk Box检查的各自值(Get Respective value which is checked by chk Box in HTML Table)

获取由HTML表格中的chk Box检查的各自值(Get Respective value which is checked by chk Box in HTML Table)

因为我有生成HTML表（Asp.net表）新我需要检查相应的复选框时Cell 1的值。

假设第二个复选框是单击我需要第二行Eg的值。 如果点击第2个月，我需要值553.5000

使用JAVA SCRIP。

以及相同的总数..

总检查值..

<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay"> <tbody><tr> <td class="caption">Total Amount</td><td class="caption">Paid Fees</td> </tr><tr style="border-width: 3px; border-style: solid;"> <td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">&t;label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td> </tr><tr> <td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td> </tr> </tbody></table>

As I have Generated HTML Table (Asp.net Table ) New I need the value of the Cell One when that Respective checkBox is check..

suppose Second check box is click i need the value of the second Row Eg. if Month 2 is click I need the value 553.5000

USING JAVA SCRIP.

As well as the total of the same..

total of the check value..

<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay"> <tbody><tr> <td class="caption">Total Amount</td><td class="caption">Paid Fees</td> </tr><tr style="border-width: 3px; border-style: solid;"> <td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td> </tr><tr> <td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td> </tr><tr> <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td> </tr> </tbody></table>

最满意答案

你的问题没有透露你真正追求的是什么，并没有提供一个开发友好的例子 ，但是我们还是试试，不管怎样？

查看Working Demo （打开控制台）。

这是JS为了您的方便

$('.TotalPay input[type=checkbox]').change(function(){ var amount = $(this).parent().siblings().text(); console.log(amount); });

使用JavaScript，我们可以将事件处理程序绑定到标记外部的DOM元素，从而使HTML保持干净和语义。 onXXXXX属性可能有用，但你应该真正阅读Unobtrusive JS 。

在我的例子中，我选择了jQuery，它极大地简化了DOM遍历等繁琐的任务。 基本上，这是这个片段的作用：

通过CSS选择器获取相关复选框， 将匿名处理程序附加到他们的“更改”事件中。 在其中，遍历复选框的'uncle'并将其文本存储在amount变量中

ps请为您的元素使用语义类名。 .net搞砸了你的ID，因此IMO更加依赖于类。 此外， “jQuery很棒，首先学习JavaScript” ™。

Your question doesn't disclose what you're really after and doesn't provide a dev-friendly example, but let's try anyway, shall we?

Check out the Working Demo (open the console).

Here's the JS for your convenience

$('.TotalPay input[type=checkbox]').change(function(){ var amount = $(this).parent().siblings().text(); console.log(amount); });

Using JavaScript, we can bind event handlers to DOM elements from outside the markup, thus leaving the HTML clean and semantic. onXXXXX attributes might work, but you should really read about Unobtrusive JS.

In my example I chose jQuery, which greatly simplifies tedious tasks like DOM traversal. Basically, here's what this snippet do:

Grab the relevant checkboxes by CSS selector, attach an anonymous handler to their 'change' event. in it, traverse for the checkbox's 'uncle' and store its text in the amount variable

p.s. Please use semantic classnames for your elements. .net screws up your IDs, so IMO just rely more heavily on classes. Also, "jQuery is great, learn JavaScript first"™.