解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

问题描述：

在IE8及以下版本时，点击label标签无法自动触发checkbox的click事件，导致无法产生希望的效果。

 原HTML代码：

 <div class=\"col-sm-2\">
    <label><input type=\"checkbox\" id=\"chk_sqjc\" value=\"申请检查\" name=\"menu\" class=\"cbr cbr-blue\">申请检查</label>
 </div>

$(\"input:checkbox[name=\'menu\']\").each(function (index, element) {
        $(this).click(function () {
          if ($(this).attr(\"checked\") != undefined) {
            $(this).removeAttr(\"checked\");
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $(\"#selmenues\").val(menues);
              //console.log($(\"#selmenues\").val());
            }

          } else {
            $(this).attr(\"checked\", \"checked\");
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.push($(this).val());
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(this).val() + \',\';
            }
            $(\"#selmenues\").val(menues);
            //console.log($(\"#selmenues\").val());
          }
        })
      });

根本原因：因为ie8不支持事件传递，当点击蓝色的框框时，触发了label的click事件而并没有触发其中checkbox标签的click事件。

解决方式：我们可以修改html代码，将label标签和checkbox标签通过id属性关联，同时给label加上name属性，将事件处理放在label标签上。

新HTML代码：

 <div class=\"col-sm-2\">
   <label name=\"lbl_menu\" id=\"sqjc\"><input type=\"checkbox\" id=\"chk_sqjc\" value=\"申请检查\" name=\"menu\" class=\"cbr cbr-blue\">申请检查</label>
</div>

$(\"label[name=\'lbl_menu\']\").each(function (index, element) {
        $(this).click(function () {
          //console.log($(\'input#chk_\' + this.id).attr(\"checked\"));
          if ($(\'input#chk_\' + this.id).attr(\"checked\") != undefined) {
            $(\'input#chk_\' + this.id).removeAttr(\"checked\");
            //$(\'input#chk_\' + this.id).trigger(\"click\");
            $(\'div\').filter(\'.cbr-replaced.cbr-blue\').eq(index).removeClass(\'cbr-checked\');
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $(\"#selmenues\").val(menues);
              //console.log($(\"#selmenues\").val());
            }
          } else {
            $(\'input#chk_\' + this.id).attr(\"checked\", \"checked\");
            // console.log($(\'input#chk_\' + this.id).attr(\"checked\"));
            //$(\'input#chk_\' + this.id).trigger(\"click\");
            // console.log($(\'.cbr-replaced.cbr-blue\')[index]);
            $(\'div\').filter(\'.cbr-replaced.cbr-blue\').eq(index).addClass(\'cbr-checked\');
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.push($(\'input#chk_\' + this.id).val());
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(\'input#chk_\' + this.id).val() + \',\';
            }
            $(\"#selmenues\").val(menues);
            //console.log($(\"#selmenues\").val());
          }
        })
      });

最后加一下IE版本的判断代码就完美了。

 完整JS代码

var DEFAULT_VERSION = 8.0;
    var ua = navigator.userAgent.toLowerCase();
    var isIE = ua.indexOf(\"msie\") > -1;
    var safariVersion;
    if (isIE) {
      safariVersion = ua.match(/msie ([\\d.]+)/)[1];
    }
    if (safariVersion <= DEFAULT_VERSION) {
      $(\"label[name=\'lbl_menu\']\").each(function (index, element) {
        $(this).click(function () {
          //console.log($(\'input#chk_\' + this.id).attr(\"checked\"));
          if ($(\'input#chk_\' + this.id).attr(\"checked\") != undefined) {
            $(\'input#chk_\' + this.id).removeAttr(\"checked\");
            //$(\'input#chk_\' + this.id).trigger(\"click\");
            $(\'div\').filter(\'.cbr-replaced.cbr-blue\').eq(index).removeClass(\'cbr-checked\');
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $(\"#selmenues\").val(menues);
              //console.log($(\"#selmenues\").val());
            }
          } else {
            $(\'input#chk_\' + this.id).attr(\"checked\", \"checked\");
            // console.log($(\'input#chk_\' + this.id).attr(\"checked\"));
            //$(\'input#chk_\' + this.id).trigger(\"click\");
            // console.log($(\'.cbr-replaced.cbr-blue\')[index]);
            $(\'div\').filter(\'.cbr-replaced.cbr-blue\').eq(index).addClass(\'cbr-checked\');
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.push($(\'input#chk_\' + this.id).val());
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(\'input#chk_\' + this.id).val() + \',\';
            }
            $(\"#selmenues\").val(menues);
            //console.log($(\"#selmenues\").val());
          }
        })
      });
    }
    else {
      $(\"input:checkbox[name=\'menu\']\").each(function (index, element) {
        $(this).click(function () {
          if ($(this).attr(\"checked\") != undefined) {
            $(this).removeAttr(\"checked\");
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.forEach(function (val) {
                //console.log(element.value);
                if (element.value == val) {
                  arrMenues.splice($.inArray(val, arrMenues), 1);
                }
              });
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
              $(\"#selmenues\").val(menues);
              //console.log($(\"#selmenues\").val());
            }
          } else {
            $(this).attr(\"checked\", \"checked\");
            var menues = $(\"#selmenues\").val();
            var arrMenues = menues.split(\',\');
            if (arrMenues.length > 0) {
              arrMenues.push($(this).val());
              menues = \"\";
              arrMenues.forEach(function (val) {
                menues += val + \',\';
              });
              menues = menues.substring(0, menues.length - 1)
              //console.log(menues);
            }
            else {
              menues += $(this).val() + \',\';
            }
            $(\"#selmenues\").val(menues);
            //console.log($(\"#selmenues\").val());
          }
        })
      });
    }

以上所述是小编给大家介绍的解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！