jQuery中的checkbox问题
一开始的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").each(function () {
$(this).attr("checked", true); //选择器要有空格隔开
})
} else {
$("#list :checkbox").each(function () {
$(this).attr("checked", false);
})
} });
})
</script>
</head>
<body>
<ul id="list">
<li><label><input type="checkbox" value="1">广东省 </label></li>
<li><label><input type="checkbox" value="2">广西省 </label></li>
<li><label><input type="checkbox" value="3">河南省 </label></li>
<li><label><input type="checkbox" value="4">福建省 </label></li>
<li><label><input type="checkbox" value="5">湖南省 </label></li>
<li><label><input type="checkbox" value="6">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>
当使用带有jQuery的方法attr()时，会有相应的问题存在，比如当你在点击id=all的复选框前去点击id=list下的复选框，这时当你再次点击id=all的复选框时就会出现之前点击的复选框不会发生变化了，一直停留在选中的状态，但是查看元素时发现该复选框的checked值会发生相应的变化。我查了一下资料，问题出在如下：
原来是jQuery版本问题。因为这里用的是attr(),而jQuery的版本用的是3.1.0的，这就存在一个兼容性问题。
$("XXX").attr("attrName");而jQuery的版本用的是2.1.1，这就是存在一个兼容性和稳定性问题。
jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即使用代码如下:
$(function() {
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").each(function () {
$(this).prop("checked", true); //选择器要有空格隔开
})
} else {
$("#list :checkbox").each(function () {
$(this).prop("checked", false);
})
}
});
给出使用jQuery事先的全选和全不选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").each(function () {
$(this).prop("checked", true); //选择器要有空格隔开
})
} else {
$("#list :checkbox").each(function () {
$(this).prop("checked", false);
})
}
});
//第二种
// $("#all").click(function(){
// if(this.checked){
// $("#list :checkbox").prop("checked", true);
// }else{
// $("#list :checkbox").prop("checked", false);
// }
// }); //全选
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
}); //全不选
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
}); //反选
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
// $(this).prop("checked", !$(this).prop("checked"));
this.checked=!this.checked;
}); if($('#list :checkbox:checked').length==$("#list :checkbox").length){
$("#all").prop("checked",true);
}
else{
$("#all").prop("checked",false);
}
}); //获取选中的值
$("#getValue").click(function(){
var valArr = new Array();
$("#list :checkbox:checked").each(function(i){ //判断被选中的
valArr[i] = $(this).val();
})
var vals = valArr.join(',');//转换为逗号隔开的字符串
alert(vals);
});
})
</script>
</head>
<body>
<ul id="list">
<li><label><input type="checkbox" value="1.广东省">广东省 </label></li>
<li><label><input type="checkbox" value="2.广西省">广西省 </label></li>
<li><label><input type="checkbox" value="3.河南省">河南省 </label></li>
<li><label><input type="checkbox" value="4.福建省">福建省 </label></li>
<li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li>
<li><label><input type="checkbox" value="6.江西省">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>
使用原声JS实现全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function checkAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name)) {
el[i].checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name)) {
el[i].checked = false;
}
}
}
</script>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br><br>
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br>
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
</body>
</html>
最后插入attr()与prop()的区别：
jquery1.6中新加了一个方法prop()，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！
以下是官方建议attr(),prop()的使用：
| Attribute/Property | .attr() |
.prop() |
|---|---|---|
| accesskey | √ | |
| align | √ | |
| async | √ | √ |
| autofocus | √ | √ |
| checked | √ | √ |
| class | √ | |
| contenteditable | √ | |
| draggable | √ | |
| href | √ | |
| id | √ | |
| label | √ | |
| location ( i.e. window.location ) | √ | √ |
| multiple | √ | √ |
| readOnly | √ | √ |
| rel | √ | |
| selected | √ | √ |
| src | √ | |
| tabindex | √ | |
| title | √ | |
| type | √ | |
width ( if needed over .width() ) |
√ |
jQuery中的checkbox问题的更多相关文章
- jquery中选择checkbox拼接成字符串，然后到后台拆分取值
jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...
- js jquery中判断checkbox是否被选中的方法
在js中: document.getElementById("checkboxID").checked 返回true或者false jQuery中: $("input ...
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...
- Jquery中的checkbox 及radio的问题
在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...
- Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery中判断checkbox是否选中与禁用鼠标右键
if ($("#wds_checkbox").attr("checked")) { flag = ; } else { flag = ; } 禁用鼠标右键 // ...
- Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值
1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $ ...
- 使用jQuery获取radio/checkbox组的值的代码收集
<!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[na ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
随机推荐
- css属性设置
css在线编辑工具地址:http://tool.chinaz.com/Tools/CssDesigner.aspx 案例详情: http://dongtianee.sinaapp.com/index. ...
- android webview里获取和设置cookie
private class MyWebViewClient extends WebViewClient { public boolean shouldOverrideUrlLoading(WebVie ...
- photobooth.js jquery
<div id="example" class="photobooth" style="width:758px;height:400px&quo ...
- PHP设计模式-策略模式 转
策略模式(Strategy Pattern) 策略模式是对象的行为模式,用意是对一组算法的封装.动态的选择需要的算法并使用. 策略模式指的是程序中涉及决策控制的一种模式.策略模式功能非常强大,因为这个 ...
- easyUI数据表格datagrid之笔记
1.用ajax获取数据库数据 /**========================================= * 读取数据库信息,使用ajax的load方法 */function getMe ...
- nginx的简单操作
1.今天在nginx下访问403,发现图片访问出现403,其他没有问题,看来下图片的文件夹没有读写的权限,修改下权限就OK了! 2.重启nginx 在env/nginx/sbin目录下输入:nginx ...
- init.php 建立自己的前端共享文件
文件位置:include/init.php 1.新建文件lib_xxx.php(lib_liangxin.php) 2.在文件init.php 第74行加入代码 require(ROOT_PATH . ...
- 一句SQL实现获取自增列操作
@@IDENTITY返回最后插入的标识值. 语法@@IDENTITY 返回类型numeric 注释在一条 INSERT.SELECT INTO 或大容量复制语句完成后,@@IDENTITY 中包含此语 ...
- 关于MarshalByRefObject的解释
http://www.cnblogs.com/webfpc/archive/2010/03/10/1667101.html 首先了解一下不同应用程序域中的对象的通信方式有两种: 一种是跨应用程序域边界 ...
- Orchard源码分析（4.2）：Orchard.Logging.LoggingModule类
与CollectionOrderModule一样,LoggingModule也是一个Autofac模块.它以属性注入的方式给需要日志服务的对象设置Logger. 如果一个类有Orchard.Lo ...