使用 jQuery 通过标签 jQuery 对象访问输入的最简单方法

Question

假设您有以下代码：

<input name="my-input' id="my-input-id" />
<label for="my-input-id">

标签上附加了一个点击事件，如下所示：

$("label[for='my-input-id']").click( function() {
    var myLabel = $(this);
}

通过 myLabel jQuery 对象获取输入的 jQuery 对象的 easiest/simplest 方法是什么？

Answer 1

$("label[for='my-input-id']").click( function() {
    var myLabel = $(this);
    var input = $('input[id=' + myLabel.attr('for') + ']');
}

Answer 2

$("label[for='my-input-id']").click(function() {
  var input = $('#' + this.htmlFor);
  input.css('outline','1px solid red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name="my-input" id="my-input-id" />
<label for="my-input-id">a</label>

Answer 3

你的情况

$("label[for='my-input-id']").click( function() {
    var myLabel = $(this);
    var input = $('#' + myLabel.attr('for'));
});

Answer 4

如果输入将立即位于标签的前面位置，即在这种情况下为 myLabel，那么您还可以使用 JQuery .prev() 即遍历。看看下面的js代码

$("label[for='my-input-id']").click( function() {
  var myLabel = $(this);
  var input = $(this).prev();
}

使用 jQuery 通过标签 jQuery 对象访问输入的最简单方法

Simplest way to use jQuery to access an input via a label jQuery object

javascript

jquery

click