jquery中checkbox选中的问题之prop&attr惹的祸
2016-10-08 09:58
501 查看
一个网上很多的例子如下:
运行后,在火狐下面发现一个问题百思不得其解
问题描述:第一次点全选可以,然后点击全不选,接着再点击全选、全不选、反选就没了反应,后来用其他浏览器发下可以,所以感觉是兼容性的问题,后来查阅资料发现果然是的,参考地址http://jquery.com/
解决方法:将attr换为prop即可,经过验证各个浏览器都是好的,官网说明是在1.6之后建议用prop,在此记录以备后用
下为效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", true); }); // 全不选 $("#btnCheckNone").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", false); }); // 反选 $("#btnCheckReverse").bind("click", function () { $("[name = chkItem]:checkbox").each(function () { $(this).attr("checked", !$(this).attr("checked")); }); }); // 全不选 $("#btnSubmit").bind("click", function () { var result = new Array(); $("[name = chkItem]:checkbox").each(function () { if ($(this).is(":checked")) { result.push($(this).attr("value")); } }); alert(result.join(",")); }); }); </script> </head> <body> <div> <input name="chkItem" type="checkbox" value="今日话题" />今日话题 <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点 <input name="chkItem" type="checkbox" value="财经" />财经 <input name="chkItem" type="checkbox" value="汽车" />汽车 <input name="chkItem" type="checkbox" value="科技" />科技 <input name="chkItem" type="checkbox" value="房产" />房产 <input name="chkItem" type="checkbox" value="旅游" />旅游 </div> <div> <input id="btnCheckAll" type="button" value="全选" /> <input id="btnCheckNone" type="button" value="全不选" /> <input id="btnCheckReverse" type="button" value="反选" /> <input id="btnSubmit" type="button" value="提交" /> </div> </body> </html>
运行后,在火狐下面发现一个问题百思不得其解
问题描述:第一次点全选可以,然后点击全不选,接着再点击全选、全不选、反选就没了反应,后来用其他浏览器发下可以,所以感觉是兼容性的问题,后来查阅资料发现果然是的,参考地址http://jquery.com/
解决方法:将attr换为prop即可,经过验证各个浏览器都是好的,官网说明是在1.6之后建议用prop,在此记录以备后用
下为效果图
相关文章推荐
- jquery中checkbox选中的问题之prop&attr惹的祸
- jQuery checkbox选中问题之prop与attr注意点分析
- jQuery checkbox选中问题之prop与attr注意点分析
- jQuery checkbox选中问题之prop与attr注意点分析
- jquery中prop&attr之disabled问题
- jQuery中用attr和prop获取checkbox的属性问题
- jquery checkbox 再次勾选出问题 attr() prop()
- jquery prop('checked', true)解决attr('checked', true)不能选中radio问题
- Jquery的attr方法实现checkbox的选中状态所带来的问题解析
- checkbox 是否选中 jquery 用prop方法而不是attr方法
- jQuery获取checkbox状态时attr('checked')返回undefined的问题
- attr和prop的区别-解决checkbox选中不起作用的问题
- jquery中prop&attr之disabled问题
- jQuery中用attr和prop获取checkbox的属性问题
- jquery attr和prop区别 attr选中checkbox不起作用
- jquery checkbox attr prop
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- 修复checkbox的状态切换和动态取值的问题,主要是学会jquery选择或者不选中checkbox
- jQuery .attr() .prop() .data()区别及全选等问题
- jquery设置和获得checkbox选中问题