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 ...
随机推荐
- CDN概念+作用+特点+原理
CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...
- 产品需求文档写作方法(三)用例文档(UML用例图、流程图)
在产品和技术领域里都有UML的技能知识,而对于产品人员的UML则更多的是指用例图,也就是我所称呼的用户流程图.在讲PRD文档写作的第二篇文章里,我提到了用户流程图的制作,实际上用户流程图是我在产品规则 ...
- 【POJ2104】【HDU2665】K-th Number 主席树
[POJ2104][HDU2665]K-th Number Description You are working for Macrohard company in data structures d ...
- 利用反射动态从程序集dll执行方法和属性
程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...
- 一个苹果证书怎么多次使用——导出p12文件
http://blog.csdn.net/jjiss318/article/details/41812243 原文:http://my.oschina.net/u/1245365/blog/19636 ...
- FZU 2110 Star
简单暴力题,读入%lld会WA,%I64d能过. #include<cstdio> #include<cstring> #include<cmath> #inclu ...
- Tsinsen-A1490 osu! 【数学期望】
问题描述 osu!是一个基于<押忍!战斗!应援团><精英节拍特工><太鼓达人>等各种音乐游戏做成的一款独特的PC版音乐游戏.游戏中,玩家需要根据音乐的节奏,通过鼠标 ...
- 《Web接口开发与自动化测试 -- 基于Python语言》 ---前言
前 言 本书的原型是我整理一份Django学习文档,从事软件测试工作的这六.七年来,一直有整理学习资料的习惯,这种学习理解再输出的方式对我非常受用,博客和文档是我主要的输出形式,这些输出同时也帮 ...
- SQLite用法
SQLite语法:http://blog.csdn.net/ejzhang/article/details/6224915#08 SQLite查询优化:1.http://www.eoeandroid. ...
- 使用spol导出exce
sqlplus 能生产xls的excel文件 connect / as sysdba; SET NEWPAGE 0 SET SPACE 0 SET LINESIZE 80 SET PAGESIZE 0 ...