input是否checked与使用jquery的attr或prop方法无关
最近在项目中有这样一个需求,用户在下单时可以选择优惠券,也可取消选择,并且可以多次选择,取消。
这是一个典型的input标签checked功能,博主使用radio元素实现此需求,但是优惠券只能选中,不能取消选中,多次操作始终为选中状态。
网上搜索,看到很多帖子、博文,文中讲述使用jquery的prop方法替换attr方法可解决元素多次选择取消的问题,但是博主使用此方法并未解决问题,最后发现是点击事件引起的问题。
标签元素如下:
<input class="J_UseCouponSelect" type="radio" name="coupon_sn" id="{$coupon.coupon_sn}" value="{$coupon.coupon_sn}" price="{$coupon.coupon_value}">
<label for="{$coupon.coupon_sn}" title="{$coupon.coupon_name}"></label>
js代码如下:
$('#couponsltList label').click(function(){
var radioId = $(this).attr('for');
if( coupon_checked ){
//已选中情况下,取消选中
$(this).removeClass('checked');
$('#' + radioId).prop('checked', false);
$('#J_CouponShow').html('');
coupon_checked = false;
}else{
//未选中情况下,选中优惠券
$('#couponsltList label').removeClass('checked') && $(this).addClass('checked');
$('#couponsltList input[type="radio"]').prop('checked', false) && $('#' + radioId).prop('checked', true);
$('#J_CouponShow').html($(this).attr('title'));//回填选中的优惠券
coupon_checked = true;
}
});
博主使用的jquery版本为1.8.3,使用prop方法替换attr方法并不能解决此问题,而关键是使用了全局变量coupon_checked来标记input元素的状态,因为label标签有一个属性for,当点击标签的时候,同时也选中了radio元素,checkbox元素也是一样,并不会出现第一次点击选中,第二次点击取消,第三次点击又选中的效果。
如上js代码,尽管使用了prop方法改变了input元素的checked属性,但是由于点击事件,可能触发了document的默认事件,即点击选中,因此最后input元素的状态始终是选中的。
博主尝试不触发input的点击事件,发现此时使用prop方法和attr方法在几个jquery版本中并无太大区别,使用is(':checked')都可以判断元素的状态,选中即为true,不选中即为false,只不过attr和prop方法的返回值不同。
标签元素如下:
<label name="coupon_sn" id="label">点我</label>
<input class="J_UseCouponSelect" type="checkbox" name="coupon_sn" id="coupon_sn" value="123"/>
js代码如下:
$('#label').click(function(){
var cid = $(this).attr('name');
click_num++;
console.log(click_num);
console.log('attr:'+$("#"+cid).attr('checked'));
console.log('prop:'+$("#"+cid).prop('checked'));
console.log('is:checked:'+$("#"+cid).is(':checked'));
/*
if( $("#"+cid).prop('checked') ){
//已选中情况下,取消选中
$("#"+cid).prop('checked', false);
console.log($("#"+cid).prop('checked'));
}else{
$("#"+cid).prop('checked', true);
console.log($("#"+cid).prop('checked'));
}
*/
if( $("#"+cid).attr('checked') ){
//已选中情况下,取消选中
$("#"+cid).attr('checked', false);
console.log($("#"+cid).attr('checked'));
}else{
$("#"+cid).attr('checked', true);
console.log($("#"+cid).attr('checked'));
}
});
- jquery-1.11.1
未选中时,attr()返回undefined,prop()返回false,is(':checked')返回false;选中时,attr()返回checked,prop()返回true,is(':checked')返回true
使用attr方法,输出如下:
使用prop方法,输出如下:
- jquery-1.4.4
没有prop方法,未选中时,attr()返回false,is(':checked')返回false;选中时,attr()返回true,is(':checked')返回true
使用attr方法输出如下:
- jquery-1.8.3
结果和1.11.1相同
使用attr方法输出如下:
使用prop方法输出如下:
input是否checked与使用jquery的attr或prop方法无关的更多相关文章
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jQuery 中 attr() 和 prop() 方法的区别
前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...
- JQuery之Attr()与Prop()方法
一.Prop()的由来 JQuery 1.6开始 新增方法prop() prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题( ...
- jQuery 中 attr() 和 prop() 方法的区别<转>
前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...
- 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。
在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
随机推荐
- Python之路--你不知道的platform
某次在查看测试机(Ubuntu)发行版本时,发现得到的结果并不准确:本应得到Ubuntu,结果显示的却是Debian,大致代码如下 ... distribution_name = ['centos', ...
- 使用秘钥连接ssh
ssh服务器搭建 通过秘钥登陆连接另外一台虚拟机 创建证书 ssh-keygen -t rsa 第一行密钥保存位置直接输入回车 确定默认创建位置为 /root/.ssh 公钥必须改名为 autho ...
- BOM元素之window对象
在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.这意味着在网页中定义的任何一个对象.变量和函数,都以wi ...
- 【转】Mysql分页语句Limit用法
http://qimo601.iteye.com/blog/1634748 FAQ: MYSQL limit,offset 区别 SELECT keyword FROM `keyword_rank` ...
- Angular2 路由问题修复 、求解
Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介 ...
- Swift_字符串详解(String)
Swift_字符串详解(String) 类型别名 //类型别名 fileprivate func testTypeAliases() { let index = String.Index.self p ...
- SQL Server-聚焦深入理解死锁以及避免死锁建议(三十三)
前言 终于进入死锁系列,前面也提到过我一直对隔离级别和死锁以及如何避免死锁等问题模棱两可,所以才鼓起了重新学习SQL Server系列的勇气,本节我们来讲讲SQL Server中的死锁,看到许多文章都 ...
- Vuex 学习总结
好在之前接触过 flux,对于理解 vuex 还是很有帮助的.react 学到一半,后来因为太忙,就放弃了,现在也差不多都忘记了.不过感觉 vuex 还是跟 flux 还是有点区别的. 对于很多新手来 ...
- SQL server 数据库——数学函数、字符串函数、转换函数、时间日期函数
数学函数.字符串函数.转换函数.时间日期函数 1.数学函数 ceiling()--取上限 select ceiling(oil) as 油耗上限 from car floor()--取下限 sele ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res
koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...