jquery選取所有checkbox和判斷是否全部checkbox已經被勾選
前言 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 完整程式碼範例 前言
在做網頁的時候常常遇到的是列表清單。而通常列表必須提供checkbox來供使用者選取之後在做相對應的動作。因此,前端處理checkbox觸發變的很常用。
這一篇我會介紹兩個常用jquery的snippet來達到:
勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox
首先,我們假設我們有一個form裡面是一個table清單代表著人名和歲數。在Table的標題裡面有一個checkAll checkbox表示是否要全選每一列的checkbox。
有了這個概念,我們直接看一下程式碼:
//When the all checkbox is clicked
$('#checkAll').change(function() { //get all checkbox which want to change
var checkboxes = $(this).closest('form')
.find('input[name="chkPerson"]:checkbox'); if($(this).is(':checked')) {
checkboxes.prop('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
} });
應該滿好理解,首先找到所有對應的checkbox,判斷我們checkAll是處於勾選還是取消勾選,把這個狀態設定給全部對應的checkbox。
當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選
另外一個常常遇到的情況是,當對應的所有checkbox被勾選了,checkAll應該也要被勾選:
function checkOrRemoveCheckAll()
{
if($('input[name="chkPerson"]:checked').length == $('input[name="chkPerson"]').length)
{
$('#checkAll').prop("checked", "checked");
}
else
{
$('#checkAll').removeAttr("checked");
}
}
這個其實也滿好理解,我們先取得所有有勾選的checkbox數字,對比所有checkbox的總數字。
如果一致,表示所有被勾選了,因此checkAll也要勾選,如果不一致,表示checkAll不需要被勾選。
完整程式碼範例
JS Bin
點部落 的標籤: jquery ,snippet
jquery選取所有checkbox和判斷是否全部checkbox已經被勾選的更多相关文章
- 使用Facebook的SDK判斷來訪者是否已經按讃并成為本站粉絲團的成員
今天公司裡要做活動,其中有一項活動內容是要求來訪者按一下facebook粉絲團的讃,按了讃之後贈送現金.Facebook被墻大家眾所周知,在百度搜了一下發現因為被墻的原因導致國內涉及到Facebook ...
- jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中
jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...
- jQuery radio取值,checkbox取值,select取值
语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...
- jquery radio取值,checkbox取值,select取值及选中
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...
- [转]用Linq取CheckBoxList選取項目的值
本文转自:http://www.dotblogs.com.tw/hatelove/archive/2011/11/17/linq-checkboxlist-items-selected-values. ...
- jquery select取值,赋值操作
select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...
- Python 基礎 - for流程判斷
今天介紹另一個循環判斷式 for循環,首先,先寫一個很簡單的 for循環的代碼 #!/usr/bin/env python3 # -*- coding:utf-8 -*- for i in range ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
- jQuery处理下拉框(Select、radio、checkbox等)代码
//遍历option和添加.移除option <script> function changeShipMethod(shipping){ var len = $("select[ ...
随机推荐
- tar (child): lbzip2: Cannot exec: No such file or directory tar (child): Error is not recoverable: exiting now tar: Child returned status 2 tar: Error is not recoverable: exiting now
tar解压bz2格式 报错 解决方法很简单,只要安装bzip2就行了,yum安装的命令如下: yum -y install bzip2 如果是无法联网,可以去官网下载安装包,进一步安装即可
- ansible相关说明
2.ansible相关说明 2.1.ansible相关命令 ansible:定义并运行简单任务,主要执行ad-hoc命令 ansible-config:查看.编辑.管理ansible配置 ansibl ...
- Tab键可访问的下拉菜单demo
<ul id="navigationRegion"> <li token="1" class="index_on"> ...
- CentOS 7.4 源码编译安装 Redis
一.CentOS 7.4 源码编译安装 Redis 1.下载源码并解压 wget http://download.redis.io/releases/redis-4.0.10.tar.gz tar ...
- Spider-scrapy断点续爬
scrapy的每一个爬虫,暂停时可以记录暂停状态以及爬取了哪些url,重启时可以从暂停状态开始爬取过的URL不在爬取 实现暂停与重启记录状态 方法一: 1.首先cd进入到scrapy项目里(当然你也可 ...
- MT4系统自带指标代码
MT4系统自带指标代码 ~ Accelerator Oscillator 震荡加速指标: double iAC() ~ Accumulation/Distribut ...
- sort cmp函数的写法 (特判排序 二级排序)
特判排序: 看看以下cmp写法,猜想作用: 该函数作用就是“将正数升序排列, 负数排到最后” 我认为cmp函数的一个特性就是, 如果return false, 那么函数就会将他们互换位置, retur ...
- cadence中元件所在库
DISCRETE(分立元件)中 开关: 其中可供选择的这几个比较好 SW PUSHBUTTON SW PUSHBUTTON-DPST 数码管: LDD(开头) LTD(开头) 版权声明:本文为博主原创 ...
- Apollo源码解析看一文就够
对于配置中心我们先抛出问号三连,什么是配置中心?为什么要用配置中心?配置中心怎么用? 笔者说说自己理解的配置中心,个人观点的十六字 消息存储 消息推送 环境隔离 灰度发布 今天我们先来看Apollo配 ...
- java字符串利用正则表达式分割
平时用到,整理的,总感觉缺点什么: private String getKeywordByContent(String content) { StringBuffer sbAllKwyword = n ...