應用jQuery後無法選中/取消選中複選框

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> 

這是工作，大部分。我想要的是點擊'li'，讓背景顏色發生變化，並將其內部的複選框設置爲'checked'。這樣做，但它不允許我實際單擊複選框本身，並將其更改爲選中或取消選中。

我認爲這是腳本中的一些東西，我做錯了，但我不熟悉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小提琴中更新了您的類名，以獲得更爲合適和清晰的修復。

更新的小提琴是here。