使用'keyup'时出现奇怪的JQuery for循环异常

Strange JQuery for loop anomaly when using 'keyup'

在我的网页上,我有 32 个复选框,所有复选框的 ID 均为 "U1C1"、"U1C2" 等...

我正在使用一块 JQuery 来显示具有 ID "U1C1_table"、"U1C2_table" 等的 table 的相应行...

for (var x = 1; x<33;x++) {
$('#U1C' + x).on("keyup change",function() {

if(this.checked) {
   $('#U' + x + '_TABLE').show('');
}
else {
   $('#U1_TABLE').hide('slow');
}

});
}

我使用了 for 循环来加快速度。

此代码不起作用,但是如果我将 second x 更改为 1,那么它将对第一行起作用。这很奇怪,因为如果它不会计算出相同的代码,为什么第一个 x 在

中找到
$('#U1C' + x).on("keyup change",function() {

工作正常吗?

编辑:我的 HTML

 C1 <input type="checkbox" id="U1C1" value ="U1C1">
 C2 <input type="checkbox" id="U1C2" value ="U1C2">
 C3 <input type="checkbox" id="U1C3" value ="U1C3">
 C4 <input type="checkbox" id="U1C4" value ="U1C4">
<tr id="U1_TABLE"><td>UNIT ONE</td><td>dropdown</td><td>textbox</td></tr>
<tr id="U1C1_TABLE"><td>UNIT ONE</td><td>dropdown</td><td>textbox</td></tr>
<tr id="U1C2_TABLE"><td>UNIT ONE</td><td>dropdown</td><td>textbox</td></tr>

为自己节省一些代码,并使用通用 class 以及自定义数据属性:

C1 <input type="checkbox" class="table-cb" data-number="1" id="U1C1" value ="U1C1">
C2 <input type="checkbox" class="table-cb" data-number="2" id="U1C2" value ="U1C2">
C3 <input type="checkbox" class="table-cb" data-number="3" id="U1C3" value ="U1C3">
C4 <input type="checkbox" class="table-cb" data-number="4" id="U1C4" value ="U1C4">

还有jQuery

$(".table-cb").change(function() {
    var num = $(this).data("number");
    if (this.checked) {
        $('#U' + num + '_TABLE').show('');
    } else {
        $('#U' + num + '_TABLE').hide('');
    }
});