3

我对 jQuery 不是很好，所以请放轻松。

我有这个脚本：

    $(document).ready(function() {
        $(".item").click(function() {
            if($(this).find("input").attr("checked")) {
                $(this).css("background-color", "#d1d1d1");
                $(this).find("input").removeAttr("checked");
            } else {
                $(this).css("background-color", "#03d100");
                $(this).find("input").attr("checked", "checked");
            }
        });
    });

应用于此 HTML：

<ul class="col-1">
    <li class="item">
        <input type="checkbox" />
        <label for="">Check Up</label>
        <span class="float-r">$19</span>
    </li>
    ...
</ul>

这在很大程度上是有效的。我想要的是单击“li”，更改背景颜色，并将其中的复选框设置为“已选中”。这样做，但它不允许我实际单击复选框本身并将其更改为选中或未选中。

我认为这是我做错了脚本中的某些内容，但我对 jQuery 不够熟悉，无法知道。

jsFiddle

4

2 回答 2

7 
$(document).ready(function() {

    $(".item").click(function() {

        var checkbox = $(this).find(":checkbox"),   // keep reference of checkbox
            checked = checkbox.is(":checked");      // check checkbox status
        if (checked) {
            $(this).css("background-color", "#d1d1d1");
        } else {
            $(this).css("background-color", "#03d100");
        }

        // change checkbox statr
        checkbox.prop("checked", !checked);

    });

    // bind click event  to checkbox
    // to trigger the click to li

    $('.item :checkbox').click(function() {
      $(this).parent('li').click();
    });

});

工作样本

于 2012-07-14T16:08:03.810 回答
1

这是因为您的事件与父容器相关联，因此当您单击复选框时，您也会单击 ，li.item因此它们会相互抵消。您可以使用e.preventDefault()复选框，但是，我刚刚在 JS Fiddle 中更新了您的类名，以获得更合适和更清晰的修复。

更新的小提琴在这里。

于 2012-07-14T16:03:56.903 回答