解决jquery操作checkbox火狐下第二次无法勾选问题

最近在工作中使用jquery操作checkbox，使用下面方法进行全选、反选：


代码如下:

var ischecked=allCheckObj.is(':checked');
ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false);

调试时在ie没有问题，考虑到兼容性，试试了firefox，遇到了问题。于是乎，做了如下实验：
复选框绑定了click事件，点一次选中，再点击取消选中，依次类推。这个功能在ie中没问题，但是在firefox中测试的时候，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkbox值变为"checked"，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选，太诡异了。代码修改了却得不到正确的显示状态，纠结了很久，找不到原因。
正解：后来经偶像指点，原来是jQuery版本问题。我操作属性用的是
$("**").attr("attrName");而jQuery的版本用的是1.9，这就是存在一个兼容性和稳定性问题。
jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即


代码如下:

$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

在使用是将attr改为prop，问题得解。
你遇到这个奇怪的问题了吗？赶紧试试吧

赞 (0)

相关推荐

  • jquery checkbox无法用attr()二次勾选问题的解决方法

    今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了. 想到与美女有亲密接触机会,马上鸡动起来. 经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效. 比如,如下HTML页面,一点[选中].二点[取消选中].三点[选中],瞧,不行了呗. 1.html <!doctype html> <html lang="en"> <head>

  • jquery checkbox 勾选的bug问题解决方案与分析

    jquery checkbox 勾选的bug问题解决方案与分析

    在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG,咨询了大神,才闹明白怎么回事,这里记录下来,分析给大家. 先上代码: 复制代码 代码如下: <form>         你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />         <input type="checkbox" name="i

  • JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

  • jQuery1.9.1针对checkbox的调整方法(prop)

    在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 复制代码 代码如下: $('#checkbox').prop('checked') 设置选中与不选中状态: 复制代码 代码如下: $('#checkbox').attr('checked',true)$('#checkbox').attr('checked',false) 但此方法在jquery1.9.1中,有些处理不一样 IE10,Chrome,FF中,对于选中状态,第一次$('#checkbo

  • jquery判断checkbox(复选框)是否被选中的代码

    复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals

  • Jquery 获取checkbox的checked问题

    事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说法 复制代码 代码如下: 转别人的一些东西: jquery判断checkbox是否被选中 在html的checkbox里,选中的话会有属性checked="checked". 如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($(#xxx).attr("checked")),会

  • jQuery checkbox选中问题之prop与attr注意点分析

    jQuery checkbox选中问题之prop与attr注意点分析

    本文实例分析了jQuery checkbox选中问题之prop与attr注意点.分享给大家供大家参考,具体如下: 一个网上很多的例子如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • 浅谈jquery设置和获得checkbox选中的问题

    1. 设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($(this).val() == data.veri[j]){ $(this).attr('checked','checked');//选中 } } });

  • 浅谈jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script t

  • 浅析jquery与checkbox的checked属性的问题

    1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.getElementById("checkbox_id").checked获取的值与是否钩上一至,即与所见即所得 4.使用$("#checkbox_

  • jQuery判断checkbox是否选中的3种方法

    网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二: 方法一: if ($("#checkbox-id")get(0).checked) {     // do something } 方法二: if($('#checkbox-id').is(':checked')) {     // do something } 方法三: if ($('#checkbox-id').attr('checked')) {     // do something

随机推荐