解决包含在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组件,心里一早就知道肯定会有冲突,因为以前就遇到过,并解决过,可惜当时没有记录下来. 今天在做的时候,继续被这个问题郁闷了一把,后来解决后,赶紧来记录 ...
随机推荐
- osg::NodeVisitor example
[0]osg::Group [1]osg::MatrixTransform [1] osg::MatrixTransform [1]osg::MatrixTransform [2] osg::Geod ...
- MySQL数据库备份之xtrabackup工具使用
一.Xtrabackup备份介绍及原理 二.Xtrabackup的安装 1.在centos7上基于yum源安装percona-xtrabackup软件 [root@node7 ~]# yum -y i ...
- React Native 中的 Flex Box 的用法（水平布局、垂直布局、水平居中、垂直居中、居中布局）
版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...
- Mac更新npm和node版本
npm: 查看当前版本: npm --version 更新到最新版: sodu npm install npm@latest -g node: 1.查看当前版本: node -v 2.清除npm当前缓 ...
- Java点滴-List<Integer> list; 中尖括号的意思
这是jdk1.5后版本才有的新特性,泛型,指定传入的类型.这样定义之后,这个list只能接收Integer的对象. 以前没有加这个,传入的都是Object类型的,取出来的时候要强制类型转换为自己想要的 ...
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...
- 图形学入门(1)——直线生成算法（DDA和Bresenham）
开一个新坑,记录从零开始学习图形学的过程,现在还是个正在学习的萌新,写的不好请见谅. 首先从最基础的直线生成算法开始,当我们要在屏幕上画一条直线时,由于屏幕由一个个像素组成,所以实际上计算机显示的直线 ...
- MySQL初始化脚本mysql_install_db使用简介及选项参数
mysql_install_db是一个默认放在.../mysql/scripts的一个初始化脚本. 该脚本可以在任何装有perl的操作系统上被使用,在5.6.8之前的版本,该脚本是一个shell脚本, ...
- 最新 乐游网络java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.乐游网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了乐游网络.6.7月主要是做系统复习.项目复盘.Leet ...
- Memcached集群实现及原理介绍
一.Memcached集群介绍 1.自身通过算法保证数据唯一性2.集群形式对用户和Memcached都是透明的3.Memcached的集群是通过客户端实现的4.Memcached服务端相互不认识 二. ...