Javascript 捕捉复选框更改和索引以切换指示灯

我想捕捉一个复选框的变化，并捕捉选中或未选中复选框的索引。我想知道这是否可以

$("input[type='checkbox']").change(function () {
  $("input[type='checkbox']").each(function (i) {
    //my code here
    switch (i) {
      case 0:
        break;
      case 1:
        break;
          .
          .
    }
  });
});

我的html是这样的：

<table>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
</table>

关
关
关

---

因此，我想检测选择了哪个框，然后将led改为ON和红色背景色。另一方面，如果未选中复选框，我希望将LED返回到OFF，并将颜色更改为

#cccccc

如果选中复选框或未在每个功能代码中使用此复选框，则可以执行以下操作：

if ( $(this).is(':checked') ) {
  // ...
} else {
  // ...
}

---

如果选中复选框或未在每个功能代码中使用此复选框，则可以执行以下操作：

if ( $(this).is(':checked') ) {
  // ...
} else {
  // ...
}

---

没有进一步的细节，这是我能提供的最通用的代码（有更多的信息就有很好的答案）：

编辑以解决（编辑/澄清）问题中的要求：

$('input:checkbox').change(function () {
    var that = this,
        $that = $(that),
        led = $that.closest('tr').find('td:first-child');
    led.removeClass('on off').addClass(function(){
        return that.checked ? 'on' : 'off';
    });
});

将上述jQuery与以下CSS耦合：

.led,
.led.off {
    background-color: #ccc;
}

.led.on {
    color: #000;
    background-color: #f00;
}

和HTML：

<table>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
</table>

关
关
关

请注意，我已将

id=“led”

替换为

class=“led”

，因为

id

在文档中必须是唯一的。这对于JavaScript和HTML有效性很重要

参考资料：

---

无需更多详细信息，这是我能提供的最通用的代码（有更多信息，会有更好的答案）：

编辑以解决（编辑/澄清）问题中的要求：

$('input:checkbox').change(function () {
    var that = this,
        $that = $(that),
        led = $that.closest('tr').find('td:first-child');
    led.removeClass('on off').addClass(function(){
        return that.checked ? 'on' : 'off';
    });
});

将上述jQuery与以下CSS耦合：

.led,
.led.off {
    background-color: #ccc;
}

.led.on {
    color: #000;
    background-color: #f00;
}

和HTML：

<table>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
</table>

关
关
关

请注意，我已将

id=“led”

替换为

class=“led”

，因为

id

在文档中必须是唯一的。这对于JavaScript和HTML有效性很重要

参考资料：

---

---

代码中有几个语法错误，

）}应为
}）
。您可以使用
$（this）
在
$（输入[type='checkbox']）中访问选中/未选中的复选框。更改（函数（）{}）你的HTML是什么？其次，在不了解您的目标的情况下，我们无法提供连贯/合理的答案或建议。什么是目标？有更简单的方法。提供有关用例的更多详细信息以及您想了解的有关复选框的信息。jsfiddle.net中的演示总是有助于获得更好的响应。代码中有几个语法错误，
）}应为
}）
。您可以使用
$（this）
在
$（输入[type='checkbox']）中访问选中/未选中的复选框。更改（函数（）{}）你的HTML是什么？其次，在不了解您的目标的情况下，我们无法提供连贯/合理的答案或建议。什么是目标？有更简单的方法。提供有关用例的更多详细信息以及您想了解的有关复选框的信息。jsfiddle.net中的一个演示总是有助于获得更好的响应为什么还要创建一个新变量
if（this.checked）{…}
对不起，这里的新变量在哪里？我想他/她指的是使用jQuery包装的
$（this）
，而不是使用
this
；由于
this.checked
返回的布尔值与
$（this.is（':checked'）
相同。但是，老实说，我在猜。对，请原谅我用词不当<代码>$（此）
正在创建一个新对象，从技术上讲，该对象中有函数/变量，但这不是我的意思。我只是想知道这样一个事实：this.checked比this.prop（'checked'）
便宜得多。谢谢你的投入！为什么还要创建一个新变量
if（this.checked）{…}
对不起，这里的新变量在哪里？我想他/她指的是使用jQuery包装的
$（this）
，而不是使用
this
；由于
this.checked
返回的布尔值与
$（this.is（':checked'）
相同。但是，老实说，我在猜。对，请原谅我用词不当<代码>$（此）
正在创建一个新对象，从技术上讲，该对象中有函数/变量，但这不是我的意思。我只是想知道这样一个事实：this.checked比this.prop（'checked'）

便宜得多。谢谢你的投入+1.但是，为了确保您知道，最大的问题是您正在创建一个局部变量（

that

）和两个全局变量（

index

和

checkboxIndex

）。此外，如果您选择将

this

包装到jQuery对象中，那么您最好使用它来代替

this.checked

（例如

this.prop（'checked'））

，以确保

此

未在其他地方修改。我在哪里创建全局变量？所有变量都遵循本地范围内的

var

声明。或者我是否遗漏了/误解了某些内容？我不喜欢使用

that.is（':checked'）

和

that.prop（'checked'））

，只是因为它不必要的昂贵（即使我没有缓存

这个

节点）是的，他们都是本地人variables@electronixG：不，它们并不都是局部变量--

var a=1，b=2，c=3；

与

var a=1；var b=2；var c=3；

不同，请参见@DavidThomas：关键是，如果要在jQuery对象中包装

这个

，那么如果在其他地方使用jQuery对象，那么维护代码就更容易了，是吗它更贵，但是你把后面的人弄糊涂了