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に精通していないので知ることができません。

jsフィドル

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 に答える