jquery实现复选框全选，全不选，反选中的问题
今天试了一下用jquery选择复选框，本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法。
html代码如下（这里没有用任何样式，就没有再放css了）：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test_ch5.css" >
<title>test_ch5</title>
</head>
<body>
<div id="wrapper">
<form action="" method="post">
<p>你最爱好的运动是？</p>
<input type="checkbox" name="items" >足球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">羽毛球
<input type="checkbox" name="items">乒乓球<br>
<input type="button" id="all" value="全 选">
<input type="button" id="no" value="全不选">
<input type="button" id="reverse" value="反 选">
<input type="button" id="send" value="提 交">
</form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$(function(){
$("#all").click(function(){
$('[name=items]:checkbox').prop('checked',true);
});
$("#no").click(function() {
$('[type=checkbox]:checkbox').prop('checked',false);
});
$("#reverse").click(function() {
$('input[name=items]').each(function(){
$(this).prop('checked',!$(this).prop('checked'));
});
}); })
</script>
</html>
界面如下：
之前不知道有prop，使用prop的地方全部用的是attr，发现实现不了想要的功能啊，然后才发现的prop，它是是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
jquery实现复选框全选，全不选，反选中的问题的更多相关文章
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
- element-ui 里面el-checkbox多选框，实现全选单选
data里面定义了 data:[], actionids:[],//选择的那个actionid num1:0,//没选择的计数 num2:0,//选中的计数 ...
- element-ui 复选框,实现点击表格当前行选中或取消
背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...
- java：JavaScript3（innerHTML，post和get，单选框，多选框，下拉列表值得获取，JS中的数组，JS中的正则）
1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...
- layui 复选框checkbox 实现全选全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
随机推荐
- C# 5.0-.Net新特性
调用者信息特性 CallerMemberNameAttribute | CallerFilePathAttribute | CallerLineNumberAttribute .NET Framewo ...
- 错误处理Cannot load JDBC driver class 'oracle.jdbc.drive
org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot create PoolableConnec是由于<Resource name=&qu ...
- 2. Linear Model
1. 基本形式 给定由$d$个属性描述的示例 $\textbf{x} =(x_1;x_2;...,x_n)$,其中$x_i$是$x$在第$i$个属性上的取值,线性模型(linear model)试图学 ...
- Android UiAutomator UiDevice API
UiDevice为单例模式 1.获取设备 static UiDevice getInstance() This method is deprecated. Should use getInstance ...
- (转)rootvg镜像
步骤1:查看当前还未加入到其它vg的可用PV # lspv hdisk0 00027c6a0507fe17 rootvg ...
- 机器学习实战(一)k-近邻算法
转载请注明源出处:http://www.cnblogs.com/lighten/p/7593656.html 1.原理 本章介绍机器学习实战的第一个算法——k近邻算法(k Nearest Neighb ...
- Img与background的区别
今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...
- Java虚拟机（二）：JVM内存模型
所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢?OutOfMemoryError的异常到底涉及到运行时数据的哪块区域?该怎么解决呢?其实如果你经常解决服务器性能问题,那么这些问 ...
- 数据序列化导读(2)[YAML]
上一节讲了JSON, 这一节将介绍YAML.可以认为,YAML是JSON的超集,但是更加简单易用,适合人类阅读和书写. 1. 什么是YAML? YAML是YAML Ain't Markup Lang ...
- goldarch企业管理软件框架整体解决方案终于出来了
所有的图片及解决方案都在我的博客里http://blog.posn.net 框架把企业管理软件开发中要遇到的常用做了组件化处理,达到了通用性和可定制性的目的. goldarch的数据层是spring. ...