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 ...
- php判断是否使用手机访问
直接上代码 /** * 检测是否使用手机访问 * @access public * @return bool */ public function isMobile() { if (isset($_S ...
- POJ 1163
#include<iostream> #include<stdio.h> #include<algorithm> using namespace std; int ...
- apache2.4脚本一键安装（linux环境）
1.下载apache安装包和相关组件 下载地址:https://pan.baidu.com/s/1o85i6Jw 其中包括 apache安装包:httpd-2.4.29.tar.gz apache安装 ...
- editplus配置csharp
只要是写代码的,我们肯定常有用到EditPlus..Net开发也是如此.有时我们需要调试一小段C#(或VB.Net)代码,这时去大动干戈在臃肿的VS.Net中新建“控制台应用程序”项目,写满“Cons ...
- 4、xamarin forms 设置安卓的toolbar的高度
降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 今天有群友说 如何调整 toolbar 的 高度. 最初遇到这个问题第一反映就是CustomRender 设置高度借助la ...
- Xpath string()提取多个子节点中的文本
<div> <ul class="show"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>00 ...
- 弹幕和回到顶部前端web
弹幕和回到顶部前端web 弹幕 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 【转】Entity framework 6 编写的通用数据类
原文:http://blog.csdn.net/laokaizzz/article/details/25730813 准备参考
- 【数组】Minimum Path Sum
题目: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right w ...