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. iOS - 视频开发

    视频实质: 纯粹的视频(不包括音频)实质上就是一组帧图片,经过视频编码成为视频(video)文件再把音频(audio)文件有些还有字幕文件组装在一起成为我们看到的视频(movie)文件.1秒内出现的图 ...

  2. UPUPW本地环境配置thinkphp5的问题

    问题解决参考: https://blog.csdn.net/lengyue1084/article/details/80001625 看httpd-vhosts.conf的配置: <Virtua ...

  3. numpy协方差矩阵numpy.cov

    numpy.cov(m, y=None, rowvar=True, bias=False, ddof=None, fweights=None, aweights=None)[source] Estim ...

  4. 安装和卸载windows服务程序

    安装window服务 安装命令:InstallUtil.exe MyServiceLog.exe InstallUtil存在路径为:C:\WINDOWS\Microsoft.NET\Framework ...

  5. 使用Xstart远程图形化Linux

    进入桌面以后su - 输入密码切换到root用户 rcc命令调出RoseMirrorHa页面进行操作

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. libmv

    What is libmv? libmv, also known as the Library for Multiview Reconstruction (or LMV), is the comput ...

  8. 【紫书】 Unix ls UVA - 400 模拟

    题意:中文版https://vjudge.net/problem/UVA-400#author=Zsc1615925460 题解:首先读取字符,维护一个最长字符串长度M,再排序. 对于输出,写一个pr ...

  9. Python面向对象:获取对象信息

    学习笔记内容简介: 获取对象属性和方法的函数: type(): 判断对象类型 isinstance() : 判断class的类型 dir() : 获得一个对象的所有属性和方法 把属性和方法列出来是不够 ...

  10. iOS-绘图之CoreGraphics框架

    第一步:先科普一下基础知识: Core Graphics是基于C的API,可以用于一切绘图操作 Core Graphics 和Quartz 2D的区别 quartz是一个通用的术语,用于描述在iOS和 ...