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>和</label>之间切换html文本，具体取决于是否选中了复选框：

  $('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-god所以我想知道：我怎么能这样做才能一起工作呢？

Answer 1

您可以为div和.trigger('change');输入

创建点击事件

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

Working Demo

使用JQuery将parent div单击为复选框+标签

1 个答案: