jquery中获取动态checkbox是否被选中
2015-08-17 10:54
696 查看
$('#checkbox').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了,有关此问题的解决方法如下
在JQ1.6之前的版本,我们会这样写我们的代码:
[javascript]
view plaincopy
<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').attr('checked');
//设置选中
$('#cb').attr('checked',true);
</script>
这样写在JQ1.6之前完全没问题,可是当我们升级JQ1.6到更高的版本时,问题就来了,此时我们会发现:
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了。 并且checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。所以如果checkbox一开始是选中的,那么返回的是checked,如果一开始没被选中,则返回的是undefined
[javascript]
view plaincopy
<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//设置选中
$('#cb').prop('checked',true);
</script>
分析了其中的原因,可以这样理解:
它将“属性”与“特性”做了区别,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性
[javascript]
view plaincopy
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
在JQ1.6之前的版本,我们会这样写我们的代码:
[javascript]
view plaincopy
<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').attr('checked');
//设置选中
$('#cb').attr('checked',true);
</script>
这样写在JQ1.6之前完全没问题,可是当我们升级JQ1.6到更高的版本时,问题就来了,此时我们会发现:
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了。 并且checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。所以如果checkbox一开始是选中的,那么返回的是checked,如果一开始没被选中,则返回的是undefined
[javascript]
view plaincopy
<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//设置选中
$('#cb').prop('checked',true);
</script>
分析了其中的原因,可以这样理解:
它将“属性”与“特性”做了区别,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性
[javascript]
view plaincopy
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
相关文章推荐
- 基于jQuery通过jQuery.form.js插件使用ajax提交form表单
- 【jQuery】scroll 滚动到顶部
- jquery当文档载入完毕就执行
- jQuery--包裹节点
- jQuery属性,方法操作
- jQuery通过jquery.form.js插件使用AJAX提交Form表单
- jQuery幻灯片带缩略图轮播效果代码分享
- jquery中validate插件表单验证
- 【Ajax技术】JQuery处理XML数据
- jQuery中的datatable 插件新增一行
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
- jQuery基础----24jQuery扩展-noConflict
- jQuery基础----23jQuery扩展-jQuery扩展
- jQuery基础----22jQuery AJAX-加载片段
- jQuery基础----21jQuery AJAX-异步访问
- 天猫首页迷思之-jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例
- jQuery AJAX
- Jquery学习笔记
- jQuery幻灯片带缩略图轮播效果代码分享
- 基于jQuery通过jQuery.form.js插件使用ajax提交form表单