checkbox点击事件，在IE和谷歌浏览器显示不同的结果

最新推荐文章于 2021-06-17 06:42:10 发布
最新推荐文章于 2021-06-17 06:42:10 发布
阅读量970 收藏
点赞数 2
分类专栏： 前端 文章标签： JS 浏览器兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36011279/article/details/88574274
版权
本文探讨了在Vue.js应用中使用checkbox时遇到的浏览器兼容性问题。在IE浏览器中，点击全选框能正确同步列表数据的选中状态，而在谷歌浏览器中，全选操作导致的选中状态相反。原因在于IE和Chrome对于点击事件（click）触发时获取的选中状态不同。为解决这个问题，建议将事件监听器从click改为change，以确保在所有浏览器中行为一致。
摘要由CSDN通过智能技术生成

html代码(vue.js)

<table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="w55" th:text="#{ESE0120.th.No}"></th>
                                    <th class="w55">
                                        <input type="checkbox" v-model="check" @click="doCheck"/>
                                    </th>
                                    <th class="w110" th:text="#{ESE0120.th.date}"></th>
                                    <th class="w110" th:text="#{ESE0120.th.tokikbn}"></th>
                                    <th class="w200" th:text="#{ESE0120.th.ryouriName}"></th><

最低0.47元/天 解锁文章
程序猿_小郑
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkBOX在不同浏览器兼容问题
HiYooa的专栏
09-24 3137
问题描述：  CheckBox   attr 属性在谷歌浏览器中不可用    解决方案   将Attr变为Prop  注意  Prop 获取的是 BOOl 类型值             $("#chk_all").click(function () {                        if ($(this).prop("checked")) {         
关于IE下复选框的样式问题
a986017181的博客
02-27 573
一、为什么复选框与后面的文字有间距 1.在FF，chrome，Safari等浏览器，是由margin引起的，也就是checkbox有默认margin-right:3px。（FF下复选框默认margin值为3px 3px 3px 4px，chrome与之一致 ）2.IE6-IE8是由本身引起的。 FF的虚框直接依附在复选框本身的边框上，IE6是偌...
火狐，谷歌浏览器checkbox全选的问题
weixin_30385925的博客
01-18 428
在工作中使用jquery操作checkbox，进行全选、反选，现在的问题是火狐下第二次无法勾选问题，在下面有个详细的解答，感兴趣的朋友可以参考下 最近在工作中使用jquery操作checkbox，使用下面方法进行全选、反选： 复制代码 代码如下: var ischecked=allCheckObj.is(':checked'); ischecked?checksObj.attr('...
Asp.net获取客户浏览器信息，Chrome名称不匹配问题
weixin_30551947的博客
03-09 77
公司要自己做一套简单的网站统计系统，主要统计客户浏览器的一些信息，记录浏览器名称，主要版本，是否支持Java Script等信息，我们在.Net Framework 3.5下新建了一个Web项目，使用下面的代码来获取客户浏览器名称： Request.Browser.Browser 问题出现了，在Chrome浏览器下，获取到的浏览器名称是AppleMAC-Safari，而不是Chrome...
chrome和ie 浏览器对checkbox选中状态获取
04-26 1636
<input type="checkbox" onclick="checkAll(this)"> function checkAll(obj){ //chrome obj.checked : true / false //ie obj.status : true / false }
checkbox点击事件修改样式
01-08
在这个示例中，有两个JavaScript函数，分别是`activeCheckBox()`和`activeCheckBoxBySelector()`，它们分别用于处理所有`checkboxdiv`的点击事件和特定区域内的`checkboxdiv`点击事件。 `activeCheckBox()`函数主要...
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
10-16
然而，在IE8及更早版本中，这种事件冒泡并不完全支持，导致点击`<label>`时，checkbox的点击事件不会被正确触发。 原HTML代码示例： ```html <label><input type="checkbox" id="chk_sqjc" value="申请检查" ...
关于onchange事件在IE和FF下的表现及解决方法
01-19
当时的实现是为这个checkbox添加一个onchange事件，但结果却出人意料，为此，我深入的研究了一下，发现了onchange事件在IE和FF下的表现存在着以下问题。 问题①：在FF下，当改变checkbox的选中状态时，会马上触发...
IE中checkbox在刷新后初始化的问题
12-11
这个问题讨论的是在Internet Explorer（IE）浏览器中，如何正确初始化一个复选框（checkbox）的未选中状态。在其他浏览器如Firefox中，设置checkbox的`checked`属性为`false`可以轻松实现这一功能，但在IE中却会出现...
el-checkbox遇到的问题
weixin_30633507的博客
02-25 724
在官网中有实例 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></d...
checkbox选中取消选中、二次选中无效以及浏览器兼容性问题问题总结
Genge
11-12 4462
var btn_cancel = function(){ $("#checkbox").prop('checked',false); }; var btn_submit = function(){ $("#checkbox").prop('checked',true); }; 看到网络答案都是复制粘贴的，我也是醉了，想问下你们，真的亲自试过么？成功过么
HTML checkedbox样式,通过css3实现checkbox选择样式
weixin_42516882的博客
06-17 594
前端开发过程中，由于不同浏览器间的不兼容性，相同的标签在不同的浏览器中显示不同的效果。尤其在移动端开发中，安卓与iOS表单元素显示各不相共，所以在前端页面开发过程中，需要统一相关样式，前端er需要自己开发相应组件去实现对应标签功能。知识点： css3中before与after选择器，兄弟选择器，checked选择器本示例通过css3实现浏览器下checkbox选中与未选中效果。实现效果示例1、ht...
chrome控制台一句话实现页面checkbox全选
Don't lost way
05-14 1887
有时候做 一些重复性的工作，操作一些界面，需要全选checkbox，但是页面又没提供全选功能，此时一句话全选能帮我们节省很多时间 document.querySelectorAll('input[type=checkbox]').forEach(function(item){ item.checked=true; console.log(item.checked) }); 在此记录，并不是因为这个功能很难，只是为了提醒我们，要时刻想着如何用工具提高效率。 ...
IE 兼容 Javascript 读取checkbox的值
网站开发初中级代码参考-转载
08-26 102
&lt;script type="text/javascript"&gt; function test(){ // 得到checkbox数组 var elements = document.getElementsByName("answer"); var str = ""; // 取得所选择的角色 for(var i=0;i&lt;elements.length;i++){ if(e...
html 多选框的样式,漂亮的checkbox样式(多选框)完美兼容IE8/9/10，FF等
weixin_42653691的博客
06-03 1106
说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。在此记录一款checkbox的样式，供大家也供我以后方便使用。有三种状态，default、hov...
checkbox的change事件（IE浏览器change事件问题及解决方法）
热门推荐
lwf的博客
10-25 1万+
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件。 $('document').ready(function(){ $('#checkbox').change(function(){ alert('checked'); }) })上面几行代码在Firefox等浏览器中
使用DOM来创建页面元素的一些问题
weixin_34194379的博客
04-17 136
    在IE中使用DOM方式来动态创建页面元素的时候，我发现了一些问题。记录于此，如果您有好的意见欢迎提供，如果您也遇到此问题，希望能有助你解决。    对于动态HTML编程，IE实现了两套模型：一套是以操作innerHTML为主的狭义的DHTML，一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTM...
可是CheckBox和Item点击事件不在一个activity
最新发布
05-30
如果CheckBox和Item点击事件不在同一个Activity中，那么可以考虑通过广播的方式来实现。具体步骤如下： 1. 在Adapter中注册广播接收器 在Adapter中注册广播接收器，在接收到广播时处理相应的逻辑。例如： ``` public class MyAdapter extends BaseAdapter { private Context mContext; public MyAdapter(Context context) { mContext = context; // 注册广播接收器 IntentFilter intentFilter = new IntentFilter(); intentFilter.addAction("com.example.action.ITEM_CLICK"); mContext.registerReceiver(mReceiver, intentFilter); } private BroadcastReceiver mReceiver = new BroadcastReceiver() { @Override public void onReceive(Context context, Intent intent) { if ("com.example.action.ITEM_CLICK".equals(intent.getAction())) { // 处理Item的点击事件 int position = intent.getIntExtra("position", -1); // ... } } }; } ``` 2. 在CheckBox的点击事件中发送广播 在CheckBox的点击事件中发送广播，将需要传递的参数放入Intent中。例如： ``` checkBox.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 处理CheckBox的点击事件 // ... // 发送广播 Intent intent = new Intent("com.example.action.ITEM_CLICK"); intent.putExtra("position", position); mContext.sendBroadcast(intent); } }); ``` 这样，当点击CheckBox时，会发送广播到注册了相应广播接收器的Adapter中，从而处理Item的点击事件。需要注意的是，在不需要使用广播时需要在Adapter中解除广播接收器的注册，避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值