Question

我有以下代码，checkb从checkb01开始到chekb342。

<tr>
     <td class="specs_under">Specs</td>
     <td id="checkb77" class='checkb'><input type="checkbox" id="add_remove77" class="change_image77"/></td>
     <td  class="specs_under_value" id="specs_unit77">1</td>
     <td rowspan="13" class="specs_under_value" id="specs_itempr77">15</td>
     <td class="specs_under_value" id="specs_quantity77">&nbsp;</td>
     <td class="specs_under_value" id="specs_packageprice77">0.125</td>
</tr>

我尝试使用此代码

$(document).ready(function(){
    $(".checkb").toggle(function() {
        var cid = $(this).attr('id');
        alert('id');

    },function() {
        alert('checkbox unchekced');

    }

如何使用jquery

在<td>相应的复选框点击中获取ID的值

由于让

伙伴我在点击复选框时需要获取id的值，而不是复选框ID

Answer 1

$(':checkbox').toggle(function() {
    var cid = $(this).attr('id');
    alert(cid);
}, function() {
    alert('checkbox unchekced');
});

Answer 2

如果你试图获取封闭td的id（而不是复选框本身），请考虑使用.closest（）函数。

例如：

$(':checkbox').change(function(){
    var id = $(this).closest('td').attr('id');
    alert(id + ' : ' + this.checked);
});

Answer 3

您可以通过将事件处理程序直接附加到复选框来获取值（toggle()会自动取消默认检查操作，因此我们在此处使用change()）：

$('.checkb :checkbox').change(function(){
    if(this.checked){
        // Do somethin'
        alert(this.id);
    } else {
        // Do something else
        alert('Unchecked!');
    }
});

如果您真的想使用toggle，则此代码可以有所作为：

$(".checkb").toggle(function() {
    var cid = $(this).children(':checkbox').attr('id');
    alert(cid);
}, function() {
    alert('checkbox unchekced');
});

但是，由于上述默认操作取消，因此永远不会检查复选框。

Answer 4

我现在能想到的最简单的方法是在输入标记中添加 rel 属性，并在tr标记中添加id：

<tr id="row77">
     <td class="specs_under">Specs</td>
     <td id="checkb77" class='checkb'><input type="checkbox" id="add_remove77" class="change_image77" rel="row77"/></td>
     <td  class="specs_under_value" id="specs_unit77">1</td>
     <td rowspan="13" class="specs_under_value" id="specs_itempr77">15</td>
     <td class="specs_under_value" id="specs_quantity77">&nbsp;</td>
     <td class="specs_under_value" id="specs_packageprice77">0.125</td>
</tr>

然后使用：

<script type="text/javascript">
     $('checkbox:checked').each(function() {
         var id = $(this).attr('rel').substr(3,$(this).attr('rel').length); // 77
         var specs_packageprice = $('#'+$(this).attr('rel')+' #specs_packageprice'+id).html(); //0.125
         // More code...
     }
</script>

我也认为你可以简化这个......

Answer 5

如果您使用的是jquery 1.4.2（最新版本，我认为），我会考虑使用delegate（）。像这样：

$(function() {
  $("table").delegate(":checkbox", "click", function() {alert($(this).attr("id");})
})

显然，您可以在点击处理程序中执行任何操作。

代理所做的是附加到包含所有复选框的表。只要单击表中的输入元素，处理程序就会触发。如果表中有其他输入，则需要检查以确保您拥有所需的元素。您可以检查类型是否为复选框。我建议给你的表一个id，并用上面的id替换“table”。

或者，您可以将单击处理程序附加到表中的每个输入，但这可能不会更容易，并且可能会更慢。

最后，如果您没有使用1.4.2，但使用的是至少1.3，则可以使用live（）而不是委托。

从使用jQuery获取attr（'id'）

5 个答案: