Jquery如何将属性添加到父对象？

Question

情况是这样的

我有这个 jquery 代码

$("li").click(function(){
var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.prop("checked") == "" ){
        checkbox.prop("checked", true);
        (this).addClass("on");
    } else {
        checkbox.prop("checked", false);
        ("li").removeClass("on");
    }
});

还有这个html

<ul id="id_priori">
<li><label for="id_priori_0"><input id="id_priori_0" name="priori" type="checkbox"> Hola</label></li>
</ul>

我想要做的是在

上添加/删除类

取决于复选框是选中还是未选中，但它不起作用

Answer 1

几个错误：

更改：

("li").removeClass("on");

收件人：

$("li").removeClass("on"); // You are missing the $

更改：

(this).addClass("on");

收件人：

$(this).addClass("on"); // You are missing the $

另外，使用.is(:checked') 来查看复选框是否被选中。

试试这个：

$(document).ready(function () {
    $('li').addClass('on');
    $("li").click(function () {
        var checkbox = $(this).find("input[type='checkbox']");
        if (checkbox.is(':checked')) {
            $(this).addClass("on");
        } else {
            $(this).removeClass("on");
        }
    });
});

JSFiddle Demo

Answer 2

您可以将其简化为

$("li").click(function(){
    var self = $(this),
        checkbox = self.find("input[type='checkbox']")[0];

    // change the checkbox state
    checkbox.checked = !checkbox.checked;

    self.toggleClass( 'on', checkbox.checked );
});

---

最好将处理程序委托给ul

$("#id_priori").on('click', 'li', function(){
    var self = $(this),
        checkbox = self.find("input[type='checkbox']")[0];

    // change the checkbox state
    checkbox.checked = !checkbox.checked;

    self.toggleClass( 'on', checkbox.checked );
});

http://jsfiddle.net/gaby/W9D8n/2/的演示

---

更新

使预检查的li 元素添加on 类

.find(":checkbox").each(function(){
   $(this).closest('li').toggleClass('on', this.checked);
});

到代码。

$("#id_priori").on('click', 'li', function(){
    var self = $(this),
        checkbox = self.find(":checkbox")[0];

    // change the checkbox state
    checkbox.checked = !checkbox.checked;

    self.toggleClass( 'on', checkbox.checked );

}).find(":checkbox").each(function(){

    $(this).closest('li').toggleClass('on', this.checked);

});

http://jsfiddle.net/gaby/W9D8n/3/的演示