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 冒泡的排除出去检测方法：&nbsp; &nbsp;$(".hidemore").click(function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var checked = $(this).find("input").is(':checked');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(event.target.nodeName==="INPUT"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(event.target.checked);&nbsp; //true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (checked === false) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find("input").prop("checked", true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (checked === true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find("input").prop("checked",false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(event.target.checked);&nbsp; &nbsp; &nbsp; //false&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });可见input改变了两次js&nbsp; var span = document.getElementsByClassName('hidemore')[0];&nbsp; &nbsp; &nbsp; &nbsp; var inp = span.getElementsByTagName('input')[0];&nbsp; &nbsp; &nbsp; &nbsp; span.onclick=function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(e.target.nodeName==='INPUT'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp.checked = !inp.checked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }jq&nbsp; &nbsp; &nbsp; $(".hidemore").click(function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var checked = $(this).find("input").is(':checked');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(event.target.nodeName==="INPUT")return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (checked === false) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find("input").prop("checked", true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).find("input").prop("checked",false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });

Answer 2

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