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. 公司HBase基准性能测试之准备篇

    本次测试主要评估线上HBase的整体性能,量化当前HBase的性能指标,对各种场景下HBase性能表现进行评估,为业务应用提供参考. 测试环境 测试环境包括测试过程中HBase集群的拓扑结构.以及需要 ...

  2. windows乱码

    对于支持 UNICODE的应用程序,Windows 会默认使用 Unicode编码.对于不支持Unicode的应用程序Windows 会采用 ANSI编码 (也就是各个国家自己制定的标准编码方式,如对 ...

  3. hdu3038 How many answers are wrong【并查集】

    TT and FF are ... friends. Uh... very very good friends -________-b  FF is a bad boy, he is always w ...

  4. oracle 日期格式化和数据去重

    1.获取系统日期: select sysdate as date1 from dual: 当前时间减去7分钟的时间 select sysdate,sysdate - interval '7' MINU ...

  5. model方法取值总结

    转自:https://www.cnblogs.com/ajianbeyourself/p/3604332.html

  6. vue - vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  7. 单例模式:Qt本身就提供了专门的宏 Q_GLOBAL_STATIC 通过这个宏不但定义简单,还可以获得线程安全性

    标题起的是有点大 主要是工作和学习中,遇到些朋友,怎么说呢,代码不够Qt化 可能是由于他们一开始接触的是 Java MFC 吧 接触 Qt 7个年头了 希望我的系列文章能抛砖引玉吧 单例模式 很多人洋 ...

  8. 在Java中谈尾递归--尾递归和垃圾回收的比较

    我不是故意在JAVA中谈尾递归的,因为在JAVA中谈尾递归真的是要绕好几个弯,只是我确实只有JAVA学得比较好,虽然确实C是在学校学过还考了90+,真学得没自学的JAVA好 不过也是因为要绕几个弯,所 ...

  9. AspNetPager使用方法

    一.AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二.AspNetPager支持各种数据绑定控件GridView.DataG ...

  10. BUG笔记:Win XP IE8下HTML Parsing Error: Unable to modify the parent container element before the child

    [Bug描述]Windows XP IE8的某些版本下页面只显示一部分,其余为空白.IE左下角有惊叹号报错标志,点开后显示字符如下: HTML Parsing Error: Unable to mod ...