使用 jQuery 从 <td> 获取 attr('id')答案

【问题标题】：Get attr('id') from a <td> using jQuery使用 jQuery 从 <td> 获取 attr('id')
【发布时间】：2010-10-09 17:52:11
【问题描述】：

我有如下代码，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

【问题讨论】：

你为什么选择 TD id 而不是复选框本身？
因为我必须从进一步的 td 获取值，无论哪种方式它都不会给我值（attr（'id'））。

标签： jquery

【解决方案1】：

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

【讨论】：

我能做到。我必须为每个复制/粘贴 342 次
不，你不必那样做。
@darin，我怎样才能获得的属性
使用 .parent() 获取复选框的父元素。
$(this).parent('td').attr('id')

【解决方案2】：

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

例如：

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

【讨论】：

【解决方案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');
});

但是，由于上面提到的默认动作取消，复选框永远不能被选中。

【讨论】：

我可以勾选复选框，但它的 attr('id') 我无法获得
@Jean jsfiddle.net/yijiang/CeFPh 你可以看到我所说的行为。否则，我不完全确定你想要什么
@yi span 还可以，但我想在一张桌子上做。
@Jean 这没什么区别——你在这里使用的是类选择器，而不是标签，所以你使用的标签应该没有区别。

【解决方案4】：

我现在能想到的最简单的方法是在 input 标签中添加一个 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>

我也认为您可以简化很多...

【讨论】：

【解决方案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() 代替 delegate。

【讨论】：