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，就相当于双击