我想捕获复选框更改,并捕获选中或未选中的复选框的索引。我想知道这是否可以。
$("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
最佳答案
没有更多详细信息,这是我可以提供的最通用的代码(更多信息会带来很好的答案):
$('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';
});
});
将上面的 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
< em>在文档中必须是唯一的。当涉及到 JavaScript 和 HTML 有效性时,这一点很重要。
引用文献:
关于javascript - 捕获复选框更改并索引以切换 LED,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15851894/