jquery input父元素设置点击选择事件，点击input无法选择

Question

<span class="main_span"><input type="checkbox"/>避孕套</span>

为了实现点击span范围内都能勾选，同时不想用label，选择给span添加点击事件

$('.main_span').on('click',function(e){ // 全选功能
            let self = this
            if ($(self).find('input').is(':checked')) {
                $(self).find('input').prop('checked', false)
            } else{
                $(self).find('input').prop('checked', true)
            }
        })

问题是：
此时点击span中的文字(即避孕套三个字)，可以实现选择和取消选择功能

但是点击input框的时候却没有反应了
把函数中的if代码注释掉，则input框正常了，怀疑是不是设置的效果与input本身的点击事件有所冲突，现在不知道该如何解决。

Answer 1

const $input = $(this).find('input')
$input.prop('checked', ! $input.prop('checked'))

Answer 2

处理了 很简单 为input再写一个点击事件:

$("body").on('click','.item input[type=checkbox]',function (e) {
          e.stopPropagation();//阻止事件冒泡
    });