在Onclick事件中获取标签属性

Question

<div style='padding:10px;border:1px solid #888;width:150px;' id='btnTest' data-id='1'>
    <label>
      <input type='checkbox' name='test1' />
      TEST1
    </label>
    <label>
      <input type='checkbox' name='test2' />
      TEST2
    </label>
</div>

<script>
$(function() {
  $('#btnTest').click(function(e){
    console.log($(e.target).attr('data-id'));
  })
});
</script>

在该测试代码中，如果我单击标签区域，则无法获取数据ID值，

即使单击该DIV标签中的另一个元素，也可以通过任何方式获取数据ID？

Answer 1

 $(this).attr('data-id');

e.target表示单击的元素，这表示绑定处理程序的元素。

Answer 2

用这个'：

$(function() {
  $('#btnTest').click(function(){
    console.log($(this).attr('data-id'));
  })
});

但是，如果您想要复选框的“名称”：请执行以下操作：

$(function() {
  $('#btnTest label input').click(function(){
    alert($(this).attr('name'));
  })
});

Answer 3

是的，您可以简单地执行以下操作：

$(function() {
  $('#btnTest').click(function(e){
    console.log($(e.target).parent('#btnTest').attr('data-id'));
  })
});