JS input点击选中

Question

代码如下
<span class="hidemore">

   <input type="checkbox">按钮

</span>

效果

$(".hidemore").click(function () {

    var checked = $(this).find("input").is(':checked');
    if (checked === false) {
        $(this).find("input").prop("checked", "checked");
        $(this).parent().find("span:first-child").find("a").removeClass("on");
    } else if (checked === true) {
        $(this).find("input").removeAttr("checked");
    }
});

这段代码很奇怪，点击span的时候input能打上勾，但是点击input的时候勾选不上。
我一直觉得是冒泡原因。
请问下大牛写还有什么方法

Answer 1

input 在hidemore中的，你点击了hidemore会让input 也点击了的，你应该把input 冒泡的排除出去
检测方法：

   $(".hidemore").click(function (e) {
            var checked = $(this).find("input").is(':checked');
            if(event.target.nodeName==="INPUT"){
                console.log(event.target.checked);  //true
            };
            if (checked === false) {
                $(this).find("input").prop("checked", true);
            } else if (checked === true) {
                $(this).find("input").prop("checked",false);
            }
            console.log(event.target.checked);      //false    
        });

可见input改变了两次

js

  var span = document.getElementsByClassName('hidemore')[0];
        var inp = span.getElementsByTagName('input')[0];
        span.onclick=function(e){
            if(e.target.nodeName==='INPUT'){
                return;
            }else{
                inp.checked = !inp.checked;
            }
        }

jq

      $(".hidemore").click(function (event) {
            var checked = $(this).find("input").is(':checked');
            if(event.target.nodeName==="INPUT")return;
            if (checked === false) {
                $(this).find("input").prop("checked", true);              
            } else{
                $(this).find("input").prop("checked",false);
            }          
        });

Answer 2

有冒泡吧，你点input也是点到了span，就相当于双击