获取由 chk Box 在 HTML 表中检查的相应值答案

【问题标题】：Get respective value which is checked by chk Box in HTML Table获取由 chk Box 在 HTML 表中检查的相应值
【发布时间】：2011-08-10 23:00:59
【问题描述】：

由于我已经生成了 HTML 表（Asp.net 表），现在，在检查各个复选框时，我需要一个单元格的值。

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

使用 JAVA 脚本。

还有总一样的..

校验值的总和..

<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>

【问题讨论】：

标签： javascript html asp.net html-table dom-events

【解决方案1】：

您的问题并没有透露您真正追求的是什么，也没有提供dev-friendly example，但我们还是试试吧，好吗？

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

这里是 JS 为了您的方便

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

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

在我的示例中，我选择了 jQuery，它极大地简化了 DOM 遍历等繁琐的任务。基本上，这就是 sn-p 的作用：

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

附言请为您的元素使用语义类名。 .net 搞砸了你的 ID，所以 IMO 更多地依赖于类。还有，“jQuery 很棒，先学 JavaScript”™。

【讨论】：