捕捉复选框的变化和索引切换led

Catching checkbox changes and indexing to toggle LEDs

本文关键字：索引 led 变化 复选框      更新时间：2023-09-26

我想捕获复选框更改，并捕获选中或未选中的复选框的索引。我想知道这是否可以。

$("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

没有更多的细节，这是我能提供的最通用的代码(有更多的信息，嗯，答案):

$('input:checkbox').change(function(){
    // caching the $(this) jQuery object, since we're using it more than once:
    var that = $(this),
         // index of element with regard to its sibling elements:
        index = that.index(),
        // index with regard to other checkbox elements:
        checkboxIndex = that.index('input:checkbox');
        if (this.checked){ // this.checked evaluates to a Boolean (true/false)
            // this block executed only if the checkbox *is* checked
        } else {
            // this block executed only if the checkbox is *not* checked
        }
});

编辑以解决(编辑/澄清)问题中的要求:

$('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';
    });
});

JS Fiddle demo.

将上面的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的有效性时，这很重要。

引用:

  • :checkbox选择器
  • addClass() .
  • closest() .
  • index() .
  • removeClass() .

你可以这样做，如果一个复选框被选中或不使用这个在你的每个函数代码:

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

$('input:checkbox').change(function() {
   if (this.checked) {
      // your code here
      alert(this.value);
   }
});
相关文章：