jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下。有问题的话,还望各路大神指导一二。
html代码如下:
<fieldset data-role="controlgroup">
<label><input type="checkbox" name="boxes" id="select_all" onclick="selectAll();" >全选</label>
<label><input type="checkbox" name="box" onclick="select();" >子选项1</label>
<label><input type="checkbox" name="box" onclick="select();" >子选项2</label>
</fieldset>
jquery代码如下:
function selectAll(){
if ($("#select_all").prop("checked")) {
$("input[name='box']").prop("checked", true).checkboxradio("refresh");
} else {
$("input[name='box']").prop("checked", false).checkboxradio("refresh");
}
}
/*如果子项全被选中或者某一个子项被取消,全选项相应的勾选或者全选相应取消勾选*/
function select(){
if ($("#select_all").prop("checked")){
$("input[name='box']").each(function(){
if(this.checked == false)
{
$("input[name='boxes']").prop("checked", false).checkboxradio("refresh");
}
});
}
else{
var n = 0;
$("input[name='box']").each(function(){
if(this.checked == false){
n++;
}
});
if(!n){
$("input[name='boxes']").prop("checked", true).checkboxradio("refresh");
}
}
}
jQuery --checkbox全选和取消全选简洁高效的解决办法的更多相关文章
- bootstrap实现checkbox全选、取消全选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- datagridview里面的checkbox全选和取消全选
全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...
- jquery购物车全选,取消全选,计算总金额
这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
随机推荐
- [iOS Animation]-CALayer 专用图层
专用图层 复杂的组织都是专门化的 Catharine R. Stimpson 到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animati ...
- elya:给移动APP创业者的工具集(一)
作为移动APP的创业者,往往遇到的困扰是,人家都开发过的功能了,劳资还得辛辛苦苦开发一遍,比如说什么积分系统啊,什么IM组件啊,什么滤镜啊,而且发一个版本官网就得改一次,做一次微信营销就要开发个H5页 ...
- C#中的逆变和协变
msdn 解释如下: “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型. “逆变”则是指能够使用派生程度更小的类型. 解释的很正确,大致就是这样,不过不够直白. 直白的理解: “协变” ...
- 普通项目如何转换成Maven项目 --转载自百度知道
右键普通Java项目,在弹出的菜单中选择[Configure]-[Convert to Maven Project]: 2 在弹出的对话框中输入项目的groupId, artifactId和versi ...
- 刷新UITableView
[from]http://www.superqq.com/blog/2015/08/18/ios-development-refresh-uitableview/ UITableView对于iOS开发 ...
- 51nod1126(矩阵快速幂)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...
- UVa 459 - Graph Connectivity
题目大意:给你一个无向图的顶点和边集,让你求图中连通分量的个数.使用并查集解决. #include <cstdio> #include <cstring> #define MA ...
- [转python 父类可以调用子类的方法
问题描述:我也是在读500 Line 里满的DBDB 的代码时发现的,python的父类可以调用子类的方法,这跟平常习惯的理解方式很不一样,所以就查了下原因,记录如下: 1.现象:最近使用到了So ...
- Python知识小点(备注)
(1)if __name__ == '__main__': 的作用是让后面的代码只有文件被作为程序执行时才有效,作为库加载时不执行
- Pearson相关系数
理解皮尔逊相关的两个角度 其一, 按照高中数学水平来理解, 皮尔逊相关(Pearson Correlation Coefficient)很简单, 可以看做将两组数据首先做Z分数处理之后, 然后两组数据 ...