解决包含在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());
}
})
});
Checkbox点击事件JS代码
根本原因：因为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());
}
})
});
Label点击事件JS代码
最后加一下IE版本的判断代码就完美了。
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());
}
})
});
}
完整JS代码
初来乍到，这是本人在开发过程中遇到的小问题，简单总结了一下，分享给请大家，写的不好请多多见谅，转载请注明出处，谢谢！！
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题的更多相关文章
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- [HTML5]label标签使用以及建议
for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...
- 解决label点击事件触发两次问题
问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...
- HTML<label> 标签的 for 属性
定义和用法 for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <l ...
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- label标签的可访问性
与表单元素关联的方法(IE6下label标签包裹控件的方法是不顶用的): 1 使用for和id关联控件 <p><label for="test">标签< ...
- html——a标签添加点击事件，火狐浏览器直接显示0
一.问题描述 给一个a标签添加了点击事件,页面直接给了0如下图 二.问题解决 后台调试模式下,发现也进了后台方法,也返回了页面. 于是想到先把页面里大部分内容去掉,去掉所有js,查看是否是部分代码有问 ...
- cocos2d-x JS 获取当前系统时间(解决屏幕双击点击事件)
记录一下,好开心,感觉今天自己又学到东西了,对于屏幕双击事件本来还毫无头绪的,今天得以解决总算没白费加班,其实原理很简单:就是在点击事件里做一个判断,这个判断就是需要获取当前系统的时间的毫秒差,第一次 ...
- Android Listview中Button按钮点击事件冲突解决办法
今天做项目时,ListView中含有了Button组件,心里一早就知道肯定会有冲突,因为以前就遇到过,并解决过,可惜当时没有记录下来. 今天在做的时候,继续被这个问题郁闷了一把,后来解决后,赶紧来记录 ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_05-方法授权-方法授权测试
这是我们课程的服务里面 加了授权的方法 重启课程管理的服务 首先需要登陆 在redis复制token 访问课程列表 用最新复制的令牌 最新token可以 调用teachplan方法 调用 一个没加注解 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_02-用户认证技术方案-单点登录
2 用户认证技术方案 2.1 单点登录技术方案 分布式系统要实现单点登录,通常将认证系统独立抽取出来,并且将用户身份信息存储在单独的存储介质,比如: MySQL.Redis,考虑性能要求,通常存储在R ...
- 沙箱测试环境配置AND证书添加
支付宝SDK接口项目Demo测试 一.进入支付宝开放中心 下载密钥生成器 https://developers.alipay.com/developmentAccess/developmentAcce ...
- Windows Server2012 KB2919355 补丁无法安装
环境说明:Windows Server 2012 R2 版本 64位: 今天再给客户服务器安装 .net framework 4.7 的时候,提示产生阻滞的问题: 你需要先安装对应于 KB29193 ...
- 定时杀死warn进程
6 6 * * * /root/wz/mysqlRestart.sh #MySQL restart7 6 * * * /bin/sh /home/warn/kill_.sh8 6 * * * / ...
- （十）java虚拟机性能监控工具
一. jps(Java Virtual Machine Process Status Tool) jps主要用来输出JVM中运行的进程状态信息.语法格式如下: 命令行参数选项说明如下: 1.1 案例 ...
- CommMonitor8.0 串口过滤驱动 SDK DLL版本 C#/Delphi调用DEMO
CommMonitor8.0 SDK DLL 版本,此版本是直接调用DLL. Delphi调用定义: constCommMOnitor8x = ‘CommMOnitor8x.dll’; typeTOn ...
- 是什么在阻止我们学习unity2019？
背景 时过境迁,这是一篇老文,写于2019年5月. 在学习最新的unity ecs过程中,以及学习最新的effect 时,在迈出第一步的时候即遭遇一些困难(学习和测试环境搭建不起来,有时候真的很无语) ...
- TCP Socket + UDP Socket
小例子:http://soft.yesky.com/238/2035738.shtml 服务器程序: #include <iostream> #include <WinSock2.h ...
- 判断浏览器是否ie6
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { ...