Question

我对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>

这在大多数情况下都有效。我想要的是＆＃39; li＆＃39;要点击，让背景颜色发生变化，并将其中的复选框设置为“已选中”＆＃39;。这样做，但它不允许我实际单击复选框本身并将其更改为选中或取消选中。

我认为脚本中有些东西我做错了但是我不熟悉jQuery知道。

jsFiddle

Answer 1

$(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();
    });

});

<强> Working sample

Answer 2

这是因为您的活动与父容器相关联，因此当您点击该复选框时，您也会点击li.item，以便他们互相取消。您可以使用e.preventDefault()作为复选框，但是，我刚刚在JS Fiddle中更新了您的类名，以获得更合适和明确的修复。

更新的小提琴是here。

应用jQuery后无法选中/取消选中复选框

2 个答案: