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

问题描述：

南安网站建设公司成都创新互联,南安网站设计制作，有大型网站制作公司丰富经验。已为南安1000+提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的南安做网站的公司定做！

在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及以下版本点击事件无效果兼容的问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

当前文章：解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
当前地址：https://www.cdcxhl.com/article38/pjhjpp.html

成都网站建设公司_创新互联，为您提供云服务器、网页设计公司、App设计、搜索引擎优化、Google、网站策划

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都做网站

静态网站知识

同城分类信息