jQuery控制checkbox选中状态但是不显示选中
问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选
中状态。
问题代码:
function chooseAllOrNot(id){
var choose=$("input[name='"+id+"']").attr('checked');
if(choose=='checked'){
$("input[type=checkbox][name='"+id+"']").removeAttr('checked');
choose=$("input[name='"+id+"']").attr('checked');
}else{
$("input[type=checkbox][name='"+id+"']").attr('checked', 'true');
choose=$("input[name='"+id+"']").attr('checked');
}
}
解决方法:
function chooseAllOrNot(id){
var choose=$("input[name='"+id+"']").prop('checked');
if(choose){
$("input[type=checkbox][name='"+id+"']").removeProp('checked');
choose=$("input[name='"+id+"']").prop('checked');
}else{
$("input[type=checkbox][name='"+id+"']").prop('checked', true);
choose=$("input[name='"+id+"']").prop('checked');
}
}
或者使用javascript原生代码来实现
var fir = document.getElementsByName("name");
for(var i=fir;i<fir.length;i++){
fir[i].checked = true;
}
总结:使用attr()给属性checked赋值,发现无论赋予什么值,只要给这个属性赋值了就是选中状态,使用.attr('checked', 'true');
和.attr('checked', 'false'),结果都是选中状态,可以使用attr()和removeAttr(),或者使用.attr('checked', true);和.attr
('checked', false),但是使用attr()出现了只有第一次会出现选中和取消选中的状态,后面点击没有选中状态但是代码显示对checked属性控制成
功的,只能改为使用prop()或者使用javascript原生代码来控制,才不会出现上述情况。
附:
什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
jQuery控制checkbox选中状态但是不显示选中的更多相关文章
- jQuery 更改checkbox的状态,无效
今天写页面遇到复选框动态全选或全不选问题,正常写法如下: $("#tb").find("input[type='checkbox']").attr(" ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jquery关于checkbox复选框是否被选中的问题
本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...
- jquery 获取 CheckBox 的状态
<td style="width:220px;vertical-align:central;"><input type="checkbox" ...
- 实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...
- Jquery判断checkbox是否被选中
jQuery中: $("input[type='checkbox']").is(':checked') 返回true或false 1.attr()方法 设置或者返回备选元素的值 ...
- Dtree 添加 checkbox 复选框 可以默认选中
一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...
- 关于JQuery设置checkbox checked 的问题
近日做一个关于JQuery表单验证,有一个比较奇葩的要求,即checkbox是为必填项,textbox不是必填的. 而checkbox与textbox又是相关的,填写了textbox,则其上方的che ...
- JQuery遍历CheckBox踩坑记
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false) $(&quo ...
随机推荐
- 【Android】15.5 例15-3—Notification的各种属性演示
分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 利用这个例子,可测试通知的各种属性以及这些不同属性选项呈现的效果. 另外,在这个例子中,还演示了如何读写SD中的图 ...
- Machine Learning—The k-means clustering algorithm
印象笔记同步分享:Machine Learning-The k-means clustering algorithm
- windows 添加打印机
控制面板---->硬件和声音---->设备和打印机--->点击添加打印机 最后安驱动(选择通用) OK!
- 用wget做站点镜像
用wget做站点镜像 -- :: 分类: LINUX # wget -r -p -np -k http://xxx.edu.cn -r 表示递归下载,会下载所有的链接,不过要注意的是,不要单独使用这个 ...
- HDU 3336 Count the string 查找匹配字符串
Count the string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- [转]JavaScript放在<head>和<body>的区别
原文:http://liminhappygirl.iteye.com/blog/1841360 javaScript放在<head>和<body>的区别: 在HTML body ...
- GPIO—位带操作
GPIO—位带操作本章参考资料:< STM32F4xx 中文参考手册>存储器和总线构架章节. GPIO 章节,< Cortex®-M4 内核编程手册> 2.2.5 Bit-ba ...
- 时间同步linux和window
windows和linux都可以通过ntp服务,同步时间.
- 数字集成电路设计-14-DPI
引言 在进行IC验证时,尤其是规模较大的时候,单纯用Verilog和SV来构建testbench.可能会稍显吃力. 在这样的情况下,使用C或者C++等软件语言往往会大大加快验证速度,提高验证效率. P ...
- jquery设置radio选中
<script type="text/javascript"> $(document).ready(function(){ $("input[type=rad ...