jquery checkbox相关 prop方法
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方法的更多相关文章
- jQuery checkbox相关
搬家来的~~~ $('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法 分类: Jquery2014-03-18 17:10 5523 ...
- jquery attr()和prop()方法的区别
$('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...
- Jquery中的prop()方法 全选或全不选
注意: prop()在高版本才会有效, 低版本用attr(); $(function(){ // 元素checkbox var aChecked = $('.checkGoods'); // 全选 v ...
- jquery attr()和prop()方法的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于jQuery——attr方法和prop方法获取input的checked属性操作
经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...
- jquery attr方法和prop方法获取input的checked属性问题
jquery attr方法和prop方法获取input的checked属性问题 问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...
- jQuery 中 attr() 和 prop() 方法的区别
前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...
- jQuery 中 attr() 和 prop() 方法的区别<转>
前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
随机推荐
- VMware虚拟机安装Ubuntu系统英文改中文的方法
首先点击右上角的这个桌面 1,Change Desktop Background 图片发自简书App 2.到系统设置(System Settings)--- 点击Language Support ...
- wordpress---page页面数据调用
在wordpress的开发中,会使用wordpress的的页面,那么页面数据该怎么调用呢? 拿到页面的 content: <?php if(have_posts()) : ?> <? ...
- php---进行签名验证
为什么要进行签名,我们在进行数据请求的时候,为了防止数据被人截取,造成不好的影响,所以我们在进行数据请求的时候,需要进行签名验证,进行签名的原理是:客户端和服务端使用同样的签名算法,来计算签名,当客户 ...
- 3种方法教你PS快速去掉水印
方法一:使用选框工具 勾选水印部分: 按住Shift+f5选择内容识别: 然后 ctrl+d 取消选择,水印就去掉了 PS:其实这个方法有个快捷办法,直接使用选框工具选中之后,按Delete就可以弹出 ...
- 世界时区和Java时区详解
0.引言 Druid中时区的问题一直困扰着我们,所以我专门去研究了一下世界时区和Java中的时区,对使用Druid很用帮助. 1.UTC时间&GMT时间 UTC时间是时间标准时间(Univer ...
- nginx中location、rewrite用法总结
一.location用法总结 location可以把不同方式的请求,定位到不同的处理方式上. 1.location的用法 location ~* /js/.*/\.js 以 = 开头,表示精确匹配:如 ...
- windows10下笔记本电脑外接显示器设置
笔记本屏幕小,故外接一个显示器,方便使用. 我的电脑没有VGA接口,有HDMI接口,所以我买了一个HDMI到VGA接口转换器. 直接把外界显示器安装到笔记电脑上,如下图所示 接下来是屏幕设置 打开系统 ...
- 2018牛客网暑期ACM多校训练营(第五场) E - room - [最小费用最大流模板题]
题目链接:https://www.nowcoder.com/acm/contest/143/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K ...
- Linux crontab下关于使用date命令和sudo命令的坑
想要在root 的crontab里面加一些任务计划,希望以www用户运行命令,并且将输出重定向到某处以当时时间命名的日志文件,大致如下 /usr/bin/sudo -u www /usr/local/ ...
- First normal formal Second normal form
https://en.wikipedia.org/wiki/First_normal_form https://en.wikipedia.org/wiki/Second_normal_form A r ...