jquery - 使用 JQuery 使父 div 可点击复选框 + 标签

Question

我得到了以下 HTML

<div class="ccm-custom-style-container ccm-custom-style-intro4-308 image-caption">
    <input checked="true" type="checkbox">
    <label for="D_1"><span></span><p>whitepaper is geselecteerd</p></label>
        <h4>header</h4>
        <p>text</p>
</div>

我在这段代码中使用了 2 个脚本:
第一个脚本在 <label> 之间切换 html 文本和 </label>取决于复选框是否被选中:

  $('input').change(function() {
if ($(this).is(':checked')) {
  $(this).('label').html('<span></span>whitepaper is geselecteerd');
} else {
  $(this).('label').html('<span></span>whitepaper niet geselecteerd');
}});

第二个脚本切换父 div 的类:

  $('input').change(function () {           
  var checked = $(this).is(':checked');
  $(this).parent().toggleClass('ccm-custom-style-intro4-308',checked);
  $(this).parent().toggleClass('ccm-custom-style-intro4-309',!checked);});    

这一切都完美无缺，但现在我想让用户单击整个 div 以将复选框从选中切换为未选中并返回。我不是 Jquery 之神，所以我想知道:我怎样才能做到这一点，以便它们一起工作？

Answer 1

您可以为 div 和 .trigger('change'); 输入制作点击事件

$('.ccm-custom-style-container').on('click',function(){
    $(this).find('input').trigger('change');
});

Working Demo