如何在 mousedown 事件后找到标签旁边的输入 ID？

Question

我有以下代码：

<div class="top">
<label id="_first"><input type="checkbox" class="AA" id="first">FIRST</label>
<label id="_second"><input type="checkbox" class="BB" id="second">SECOND</label>
<label id="_first"><input type="checkbox" class="AA" id="third">THIRD</label>
</div>

如何在单击标签时监听 mousedown 事件，然后获取该输入的 ID？

例如，如果我在单词 'THIRD' 上单击鼠标指针，我想将一个变量设置为输入 id = third。我只想找到 ID，当存在某个 class（即 .BB）的输入时。

我试过这样的事情：

$('label .BB').on('mousedown', function(){
    var sel = $(this).attr('id'); // doesn't grab id of the adjacent input
});

Answer 1

$('label input.BB').click(function(e) {
  //if(e.target.type != 'checkbox' ){//check for checkbox dont fire click
  alert($(this).attr('id'))//use this context with find
  //}
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <label id="_first">
    <input type="checkbox" class="AA" id="first">FIRST</label>
  <label id="_second">
    <input type="checkbox" class="BB" id="second">SECOND</label>
  <label id="_first">
    <input type="checkbox" class="AA" id="third">THIRD</label>
</div>

将此上下文用于查找

Answer 2

将子 input 元素的 for 属性设置为 id 替换 <label> 元素的 id。在 mousedown 事件中获取 .htmlFor 个元素，共 label 个元素。

$("label").on("mousedown", function(e) {
  console.log(this.htmlFor)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<label for="first"><input type="checkbox" class="AA" id="first">FIRST</label>
<label for="second"><input type="checkbox" class="BB" id="second">SECOND</label>
<label for="third"><input type="checkbox" class="AA" id="third">THIRD</label>
</div>

Answer 3

您可以使用标签的 for 属性，它将匹配复选框的 id 属性

HTML

<div class="top">
  <input type="checkbox" class="AA" id="first">
  <label for="first">First</label>
  <input type="checkbox" class="BB" id="second">
  <label for="second">Second</label>
  <input type="checkbox" class="AA" id="third">
  <label for="third">Third</label>
</div>

JS

$('label').on('click', function() {
  var getId = $(this).attr('for');
  console.log(getId)
})

DEMO

Answer 4

使用本机 javascript 方法

var first = document.getElementById('_first');
first.setAttribute('onclick','myFunction()');

function myFunction(){
  var first = document.getElementById('_first');
  var firstID = first.getAttribute('id');
  //or
  //var firstID = first.id;
}

如何在 mousedown 事件后找到标签旁边的输入 ID？

How to I find the id of the input next to a label after mousedown event?

javascript

jquery

label

mousedown