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 ...
随机推荐
- (简单) POJ 3264 Balanced Lineup,RMQ。
Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same ...
- iOS开发——WAVE音频文件解析
WAV文件也分了好几类,相应的非数据信息存储在文件的头部,下面简单的提一下,然后在最后重点介绍44字节的那种,一般用的都是这个. 1.8KHz采样.16比特量化的线性PCM语音信号的WAVE文件头格式 ...
- display属性及inline-block值(可用来布局)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- js prototype 和constructor
1.function 和object 都有 constructor 和prototype 2. var a=new Animal() (animal 是function或Object) a 有 con ...
- [Machine-Learning] 一个线性回归的简单例子
这篇博客中做一个使用最小二乘法实现线性回归的简单例子. 代码来自<图解机器学习> 图3-2,使用MATLAB实现. 代码link 用到的matlab函数 由于以前对MATLAB也不是非常熟 ...
- console 高级用法
console.log()用法,相信大家都很熟悉了,这里就不再啰嗦. 下面来玩几个新鲜点的,我用的是chrome28,不保证兼容其他浏览器:console.log的第一个参数中可以指定一个格式字符,这 ...
- App IM 之 环信
文档参考:http://docs.easemob.com/docs.php 开发社区:http://www.imgeek.org 也可以在官网页面上点击客服进行咨询 1. 环信 之 文件导航 2. 环 ...
- QStandardItemModel的简单应用
The QStandardItemModel class provides a generic model for storing custom data. QStandardItemModel提供了 ...
- DDD设计一个电商网站
DDD设计一个电商网站(十一)-- 最后的准备 阅读目录 前言 准备 实现 结语 一.前言 最近实在太忙,上周停更了一周.按流程一步一步走到现在,到达了整个下单流程的最后一公里--结算页的处理. ...