如何使用复选框更改li以及标准点击?

时间:2013-07-05 15:26:31

标签: jquery html

我正在使用jQuery来更改li元素的样式,同时还要检查复选框。这是代码:

$(".md-popover-dayselect li").click(function() {
    if($(this).children().children(".md-popover-checkbox").is(":checked")) {
        $(this).css("background-color", "");
        $(this).css("color", "");
        $(this).children().children(".md-popover-checkbox").attr("checked", false);
    } else {
        $(this).css("background-color", "#FFF");
        $(this).css("color", "#64a3c0");
        $(this).children().children(".md-popover-checkbox").attr("checked", true);
    }
});

我遇到的问题是现在复选框本身无效。你怎么建议我让它上班?我是否必须编写专门处理复选框的代码,或者有更好的方法吗?

编辑:当我说不工作时,我的意思是复选框本身不会“检查”并且不会更改li元素(即背景颜色和颜色),如上所述。

1 个答案:

答案 0 :(得分:1)

尝试使用prop而不是attr来设置元素的布尔属性。

$(this).children().children(".md-popover-checkbox").prop("checked", false);

试试这个:

$(".md-popover-dayselect li").click(function() {

    var $this = $(this);
    var checked = $this.children().children(".md-popover-checkbox").is(":checked");
    var cssObj = {"background-color": "","color":""};
    if(!checked) {
         cssObj = {"background-color": "#FFF","color","#64a3c0"};

     $this.css(cssObj);

     $this.children().children(".md-popover-checkbox").prop("checked", !checked);
});

另请注意,孩子们只会选择直接后代,因此您可能想要检查您的选择是否完全返回元素。