jquery checkbox相关 prop方法

firefox中 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因
复选框绑定了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,问题得解。

-------------------------------------------
//个性化,美化checkbox多选框、单选框
$('input[type="checkbox"]').wrap('<div class="check-box"><i></i></div>');
$.fn.toggleCheckbox = function () {
this.attr('checked', !this.attr('checked'));
}
$('.check-box').on('click', function () {
$(this).find(':checkbox').toggleCheckbox();
$(this).toggleClass('checkedBox');
});
$('input[type="radio"]').wrap('<div class="radio-btn"><i></i></div>');
$(".radio-btn").eq(0).addClass("checkedRadio")
$(".radio-btn").on('click', function () {
var _this = $(this),
block = _this.parent().parent();
block.find('input:radio').attr('checked', false);
block.find(".radio-btn").removeClass('checkedRadio');
_this.addClass('checkedRadio');
_this.find('input:radio').attr('checked', true);
});

用js操作的需要加上 $(this).parent().parent().toggleClass('checkedBox'); 公共方法里面只处理了onclick事件,用代码控制的不另外处理样式不会跟着变动的。
公共方法在原来input上面增加了两层 <div class="radio-btn"><i></i></div>
页面处理click事件也要用外层的.check-box样式,不能直接用input里面的样式作为控制(给覆盖了点击不到)
实例:
$(function(){
$('.check-box').click(function(){
var input = $(this).children("i").children("input");
var brand = input.val();
var band ="input[serie = '" +brand + "']";

if( input.attr("checked") == 'checked'){
$(band).each(function(){
$(this).checked = true;
$(this).parent().parent().toggleClass('checkedBox');
});
}else{
$(band).each(function(){
$(this).checked = false;
$(this).parent().parent().toggleClass('checkedBox');
});
}
});
});

----------------------------------------

jquery checkbox相关 prop方法的更多相关文章

  1. jQuery checkbox相关

     搬家来的~~~ $('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法 分类: Jquery2014-03-18 17:10 5523 ...

  2. jquery attr()和prop()方法的区别

    $('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...

  3. Jquery中的prop()方法 全选或全不选

    注意: prop()在高版本才会有效, 低版本用attr(); $(function(){ // 元素checkbox var aChecked = $('.checkGoods'); // 全选 v ...

  4. jquery attr()和prop()方法的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关于jQuery——attr方法和prop方法获取input的checked属性操作

    经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...

  6. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

  7. jQuery 中 attr() 和 prop() 方法的区别

    前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...

  8. jQuery 中 attr() 和 prop() 方法的区别<转>

    前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...

  9. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

随机推荐

  1. ztree学习---将默认勾选的展开

    这里只给出前台页面上的代码,数据可以从后台获取,注意,在封装数据的时候,注意:Id(节点的id,可以是数字也可以是字符串) , pid(父亲节点的id) , name(节点名称)不能少 . html页 ...

  2. 使用python语言操作MongoDB

    MongoDB是一个跨平台的NoSQL,基于Key-Value形式保存数据.其储存格式非常类似于Python的字典,因此用Python操作MongoDB会非常的容易. pymongo的两种安装命令 p ...

  3. 9.13Django ORM那些事

    2018-9-13 14:23:22 ORM那些事  参考 : https://www.cnblogs.com/liwenzhou/p/8660826.html 今天的都是ORM的查询 更详细进阶了! ...

  4. 持续集成之jenkins

    代码部署规划 安装jenkins yum -y install java-1.8.0cd /etc/yum.repos.d/wget http://pkg.jenkins.io/redhat/jenk ...

  5. ubuntu查看隐藏文件夹

    打开所要查看的文件目录,然后ctrl + h 快捷键可以显示隐藏文件 例如在/home目录下可以看到以下隐藏文件

  6. POJ 1815 - Friendship - [拆点最大流求最小点割集][暴力枚举求升序割点] - [Dinic算法模板 - 邻接矩阵型]

    妖怪题目,做到现在:2017/8/19 - 1:41…… 不过想想还是值得的,至少邻接矩阵型的Dinic算法模板get√ 题目链接:http://poj.org/problem?id=1815 Tim ...

  7. hdfs启用垃圾站功能

    在core-site.xml文件中添加如下内容: ##开启回收站功能,设置保存7天删除数据信息        <property>                <name>f ...

  8. Oracle管理监控之rlwrap-0.37.tar.gz实现sqlplus上下翻页

    1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...

  9. 加入到java后台开发

    下载java环境安装包 http://www.oracle.com/technetwork/java/javase/overview/index.html 下载eclipse j2ee版本 http: ...

  10. Jmeter(二十一)_脚本参数化与内存溢出的解决方案

    这一篇文章随便说一下JMETER的脚本参数化 1:Parameters的两种参数化方法 1.1:函数助手参数化 首先准备你的参数数据.我在bin/data中新建了一个dat文件,记事本另存为修改编码为 ...