Question

<label class="default" for="checkbox1"><input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" /> some text</label><br />
<label class="default" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />
<label class="default" for="checkbox3"><input id="checkbox3" name="checkbox3" type="checkbox" style="display:none" /> some text</label><br />

如何使用jQuery更改当前单击的复选框的标签背景颜色？例如，当选中第二个复选框时，应使用“checked”更改其样式：

<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />

Answer 1

您需要处理change事件并在检查this.checked后是否设置背景颜色例如：

$(':checkbox').change(function() { 
    $(this).css('background-color', this.checked ? 'red' : 'transparent');
});

Answer 2

jQuery中有一个复选框选择器，所以使用它，分配click函数来获取父“label”元素并将css类切换为“checked”。这将添加类并根据复选框的状态删除类。

$("input:checkbox").click(function() { $(this).parent("label").toggleClass("checked");

另外，如果你这样做，你的css类名将会更加幸运：

<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />

而不是你上面所做的。 ;）

Answer 3

$("input[@type='checkbox']").click(function(){
     $(this).toggleClass('checked');

});

Answer 4

你的HTML看起来应该更像这样：

    <input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" />
<label style="default" for="checkbox1"> some text</label><br />

jQuery看起来像这样：

$("input[type=checkbox]").select(function() {
    $(this).toggleClass("checked");
});

在jQuery中更改当前元素背景

4 个答案: