当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-10-27 12:06

    问题描述:

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

     原HTML代码:

     <div class="col-sm-2">
        <label><input type="checkbox"  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" ><input type="checkbox"  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());
              }
            })
          });