Question

我有一组具有相同名称属性的复选框。

<input type="checkbox" name="someDude" value="true" > Joe
<input type="checkbox" name="someDude" value="true" > Jack
<input type="checkbox" name="someDude" value="true" > Ralph

我通过jQuery将这些人作为一个数组，并为他们的onChange事件指定一个事件处理程序，如此......

 var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');

for (var i = 0; i < dudes.length; i++) {
   dudes[i].onchange = function (e) {
    alert("I am " + this.name);
 }
}

在事件处理程序onChange函数中是否有一种方法可以知道哪些被单击了？由于他们的名字都是一样的，我不能简单地做我正在尝试的事情。即使我能得到索引，这也就足够了。

如果我们可以在不添加任何HTML的情况下完成它，那就太棒了。

Answer 1

事件处理程序onChange函数中是否有一种方法可以知道哪些被单击？

是的，this是被点击的那个。通常情况下，您不需要执行索引等操作。但可以使用index(element)：

var index = dudes.index(this);

但是，你通常不需要。例如，这显示了单击元素后面的文本节点的值：

var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');

for (var i = 0; i < dudes.length; i++) {
  dudes[i].onchange = function (e) {
    alert("I am " + this.name + ", " + this.nextSibling.nodeValue);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="someDude" value="true" > Joe
<input type="checkbox" name="someDude" value="true" > Jack
<input type="checkbox" name="someDude" value="true" > Ralph

（我实际上不建议像这样得到以下节点的值，它只是一个例子，证明this指的是点击的实际元素。我将输入及其相关标签放入label元素，然后使用标签.text()。）

请注意，将单击处理程序附加到这些元素的方法要简单得多，并且避免在循环中不必要地创建函数：

var myJQuery = jQuery.noConflict(true);
var dudes = myJQuery('input[name=someDude]');

dudes.on("change", function(e) {
    alert("I am " + this.name);
});

this仍然如前所示：它指的是与点击相关的实际元素。

Answer 2

this会为您提供与之互动的对象。

你的问题是很难区分它们。

明智的做法是做一些让你这样做的事情，即使JS失败并且数据作为常规表单提交发送到服务器。

给他们不同的价值观。

<input type="checkbox" name="someDude" value="Joe"> Joe

然后你可以检查：

this.value

Answer 3

$('input[name="someDude"]').on('click', function() {
    alert("My index is: " + $(this).index());
}

查看index()方法。 ;）

Answer 4

您可以使用立即调用的函数表达式来创建范围，以便每个事件处理程序都有自己的索引变量：

for (var i = 0; i < dudes.length; i++) {
  (function(i){
    dudes[i].onchange = function (e) {
      alert("I am number " + i);
    }
  })(i);
}

从组（数组）中识别哪个输入触发了事件处理程序

4 个答案: