Question

I’m not great with jQuery so please be easy on me.

I have this script:

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

Applied to this HTML:

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

This is working, for the most part. What I want is for the ‘li’ to be clicked on, have the background color change, and the checkbox inside of it to be set to ‘checked’. This does that, but it does not allow me to actually click the checkbox itself and have it change to checked or unchecked.

I assume it is something in the script that I am doing incorrectly but I am not familiar enough with jQuery to know.

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