Стоп checkbox проверяется дважды, когда внутри li с событием click

Question

Я пишу простую выпадающее меню с jQuery, и каждый элемент имеет флажок. Когда я нажимаю на элемент li, этот флажок установлен. Однако, если я нажму на флажок, он не будет выбран, потому что он будет дважды проверен. Как я могу остановить это?

jsFiddle: http://jsfiddle.net/ZEp7V/

HTML:

<div id="dropdown">Channels</div> 
<ul class="droplist"> 
    <li>News <input type="checkbox" /></li> 
    <li>Sport <input type="checkbox" /></li> 
    <li>Science <input type="checkbox" /></li> 
    <li>Health <input type="checkbox" /></li> 
    <li>All</li> 
</ul> 

CSS:

div#dropdown { 
    border: 1px solid #000; 
    width: 150px; 
    height: 20px; 
    line-height: 20px; 
    padding: 10px; 
    cursor: pointer; 
} 

ul.droplist { 
    display: none; 
    width: 170px; 
    border: 1px solid #000; 
    border-bottom: none; 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    position: absolute; 
    background-color: #fff; 
} 

ul.droplist li { 
    border-bottom: 1px solid #000; 
    padding: 10px; 
    cursor: pointer; 
} 

ul.droplist li input { 
    float: right; 
} 

JS:

$(document).ready(function(){ 

    $("#dropdown").click(function() { 
     $(this).next().slideToggle(200); 
    }); 

    $(".droplist li").click(function(e) { 
     // Toggle the checkbox 
     var input = $(this).children("input"); 
     $(input).prop("checked", !$(input).prop("checked")); 
    }); 

    $(".droplist li:last").click(function() { 
     // Select all boxes 
     var check = $('.droplist li input:not(:checked)').length; 
     $(".droplist li input").prop("checked", check); 
    }); 

}); 

Answer 1

Вы можете stop the propagation события в окошке:

$(".droplist li :checkbox").click(function (e) { 
    e.stopPropagation(); 
}); 

Это позволит предотвратить событие от бурлит дерева DOM для родительского li элемента (где, как вы говорите, это вызывает обработчик события связанного к нему).

---

В качестве примечания, вы можете изменить код, чтобы принять advantange делегации событий, которая является более эффективным, так как есть только один обработчик событий вместо того, чтобы один для каждого li элемента. Например:

$(".droplist").on("click", "li", function (e) { 
    // Toggle the checkbox 
    var input = $(this).children("input"); 
    $(input).prop("checked", !$(input).prop("checked")); 
}); 

Смотрите метод .on() для получения более подробной информации.

Answer 2

Оберните флажки с метками (этикетки совместно браузера родной клик событие с входом)

<li><label for="news_input">News <input type="checkbox" id="news_input" /></label></li> 
<li><label for="sport_input">Sport <input type="checkbox" id="sport_input" /></li> 
<li><label for="science_input">Science <input type="checkbox" id="science_input" /></li> 
<li><label for="health_input">Health <input type="checkbox" id="health_input" /></li> 

И избавиться от этого поведения

$(".droplist li").click(function(e) { 
    // Toggle the checkbox 
    var input = $(this).children("input"); 
    $(input).prop("checked", !$(input).prop("checked")); 
}); 

Как это, вы должны быть хорошо. Проблема с вашим решением заключается в том, что функция флажка собственного браузера и jQuery убивают друг друга, как только пользователь нажимает на ввод одним щелчком мыши. (Браузер проверяет флажок, jQuery отключает его)