2

チェックボックスの変更をキャッチし、選択または選択解除されたチェックボックスのインデックスもキャッチしたいと思います。これでいいのかな？と思います。

$("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をオフに戻し、色を#cccccc

4

3 に答える 3

5

これ以上の詳細がなければ、これは私が提供できる最も一般的なコードです (より多くの情報があれば、素晴らしい答えが得られます):

$('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 フィドルのデモ。

上記の 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"ため、を に置き換えたことに注意してください。これは、JavaScript と HTML の妥当性に関して重要です。id

参考文献:

于 2013-04-06T14:17:26.963 に答える
0

チェックボックスがチェックされているか、各関数コード内でこれを使用していない場合に実行できます。

if ( $(this).is(':checked') ) {
  // ...
} else {
  // ...
}
于 2013-04-06T14:09:47.373 に答える