Checkbox внутри контейнера с событием щелчка

Question

<div class="toggle-bar"> 
    <h3><input type="checkbox" class="select-all"> Title</h3> 
</div> 

<div class="content"> 
    <p>lorem ipsum</p> 
    <p>lorem ipsum</p> 
</div> 

Когда я нажимаю .toggle-bar, toggle() будет срабатывать для .content. Но как я могу предотвратить toggle(), если я поставлю флажок?

Я попытался следующие, но не работает для меня:

$(".toggle-bar").click(function() { 
    $(this).next(".content").toggle(); 
}).children(".select-all").click(function(e) { 
    e.stopPropagation(); 
}); 

Answer 1

использование stopPropagation в дочерних элементов щелкните событие, чтобы предотвратить родительский щелчок.

$(".select-all").click(function(e) { 
    e.stopPropagation(); 
    // 
}); 

Answer 2

Вы можете поймать событие и остановить его распространение с использованием stopPropagation()

$(".toggle-bar").click(function() { 
 
    $(this).next(".content").toggle(); 
 
}); 
 
$(".select-all").click(function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="toggle-bar"> 
 
    <h3><input type="checkbox" class="select-all"> Title</h3> 
 
</div> 
 

 
<div class="content"> 
 
    <p>lorem ipsum</p> 
 
    <p>lorem ipsum</p> 
 
</div>

Answer 3

Вы можете проверить, если имя класса элемента целевого события является «выбрать все», и если поэтому верните пустоту.

Вы могли бы изменить свой код, чтобы посмотреть, как это ...

<div id="toggle-bar" class="toggle-bar"> 
    <h3><input type="checkbox" class="select-all"> Title</h3> 
</div> 

И JavaScript, чтобы выглядеть следующим образом ...

$(".toggle-bar").click(function(event) { 
    var target = event.target || event.srcElement; 

    if (target.className === 'select-all') { 
     return; 
    } 

    $(this).next(".content").toggle(); 
});