前言 勾選/取消勾選 全部勾選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已經被勾選的更多相关文章

  1. 使用Facebook的SDK判斷來訪者是否已經按讃并成為本站粉絲團的成員

    今天公司裡要做活動,其中有一項活動內容是要求來訪者按一下facebook粉絲團的讃,按了讃之後贈送現金.Facebook被墻大家眾所周知,在百度搜了一下發現因為被墻的原因導致國內涉及到Facebook ...

  2. jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

  3. jQuery radio取值,checkbox取值,select取值

    语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...

  4. jquery radio取值,checkbox取值,select取值及选中

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...

  5. [转]用Linq取CheckBoxList選取項目的值

    本文转自:http://www.dotblogs.com.tw/hatelove/archive/2011/11/17/linq-checkboxlist-items-selected-values. ...

  6. jquery select取值,赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  7. Python 基礎 - for流程判斷

    今天介紹另一個循環判斷式 for循環,首先,先寫一個很簡單的 for循環的代碼 #!/usr/bin/env python3 # -*- coding:utf-8 -*- for i in range ...

  8. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  9. jQuery处理下拉框(Select、radio、checkbox等)代码

    //遍历option和添加.移除option <script> function changeShipMethod(shipping){ var len = $("select[ ...

随机推荐

  1. 【java】查重类的实现

    import java.util.Vector; public class ElementCheck { // 重复优先 static Vector<Integer> CheckSameE ...

  2. CREATE OPERATOR CLASS - 定义一个新的操作符类

    SYNOPSIS CREATE OPERATOR CLASS name [ DEFAULT ] FOR TYPE data_type USING index_method AS { OPERATOR ...

  3. cp - 复制文件和目录

    总览 cp [选项] 文件路径 cp [选项] 文件...目录 POSIX 选项: [-fipRr] GNU 参数(最短形式): [-abdfilprsuvxPR] [-S SUFFIX] [-V { ...

  4. bdflush - 将dirty缓存写回到磁盘的核心守护进程

    总览(SYNOPSIS) bdflush [opt] 描述(DESCRIPTION) bdflush 被用来启动核心守护进程将内存中的dirty缓存写到磁盘上.真正清洁工作是一个核心程序完成的. bd ...

  5. mysql 添加记录或者删除记录

    insert into tableName (prod1,pord2,... ) values (v1,v2,...) [,(v1,v2,...),(v1,v2,...)] 程度从强到弱 1.drop ...

  6. 关于统一代码规范ResultBean<T>

    之前看了一篇文章,是java团长的一篇代码规范的文章,很有启发.统一返回格式确实给开发带来方便和美感, 有时候Colltroller返回String或者什么Map,list什么的,虽然都转成json返 ...

  7. [Python3网络爬虫开发实战] 4.1-使用XPath

    XPath,全称XML Path Language,即XML路径语言,它是一门在XML文档中查找信息的语言.它最初是用来搜寻XML文档的,但是它同样适用于HTML文档的搜索. 所以在做爬虫时,我们完全 ...

  8. find -print0和xargs -0原理及用法

    平常我们经常把find和xargs搭配使用,例如: find . -name "*.txt" | xargs rm 但是这个命令如果遇到文件名里有空格或者换行符,就会出错.因为xa ...

  9. 如何自己实现session功能

    session字如其意,它的存在就是为了保持会话状态.PHP中的$_SESSION让我们很方便的使用它,但是如果PHP本身不提供这个功能,我们该如何实现呢?且听我慢慢忽悠. session的实现原理 ...

  10. mac 解决mysql启动不了

    mac升级了mysql,没有替换原来的链接的情况下, 启动mysql restart 会失败 解决方法,找到mysql真正的安装目录 mysql.server start