全选全部checkbox

最新推荐文章于 2018-07-25 22:31:15 发布
最新推荐文章于 2018-07-25 22:31:15 发布
阅读量825 收藏
点赞数
分类专栏： Javascript 文章标签： input function xhtml encoding border table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/akwolf/article/details/7028159
版权


JSCode:

/**
 * @author zhangh
 */
function toogleCheckBoxAll(containerId){
	var all = $("#"+containerId +" :input") ;
	var f = all.eq(0) ;
	if(f.attr("type")=="checkbox"&&f.get(0).checked){
		$.each(all,function(){
			var ipt = $(this) ;
			ipt.attr("checked",true) ;
		}) ;
	}
	if(f.attr("type")=="checkbox"&&f.get(0).checked==false){
		$.each(all,function(){
			var ipt = $(this) ;
			ipt.attr("checked",false) ;
		}) ;
	}
}

Html 

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>SelectAll</title>
        <script type="text/javascript" src="js/jquery-1.6.2.min.js">
        </script>
        <script type="text/javascript" src="js/selectAll.js">
        </script>
    </head>
    <body>
        <table id="container" width="200" border="1">
            <tr>
                <td>
                    <input type="checkbox" οnclick="toogleCheckBoxAll('container')"/>
                </td>
                <td>
                    姓名
                </td>
                <td>
                    年龄
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    张三
                </td>
                <td>
                    25
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    王五
                </td>
                <td>
                    20
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    钱五
                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>
                    孙七
                </td>
                <td>
                    7
                </td>
            </tr>
        </table>
    </body>
</html>


akwolf
关注
专栏目录
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...
如何实现全选checkbox效果
weixin_30865427的博客
09-18 452
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。 这一点很容易实现。 但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。 这一点会有问题，笔者遇到的就是可以取消【...
checkbox 一键全选与取消全选
Evil__的博客
07-25 2427
使用jquery实现的一个checkbox一键全选小Demo，能够一键全选，也能够一键取消全选（都选中的情况下才能一键取消全选），如果全选状态下某个checkbox取消勾选，一键全选checkbox也会被取消。个人感觉这个小Demo通用性很好。 先附上我的小Demo代码（为了方便测试查看效果，我直接将整个html文档代码copy过来了）： &lt;!DOCTYPE html&gt; &lt;...
jquery checkbox 全部选择或全部取消
wscrf的博客
09-15 1080
[javascript] view plain copy print?   //全部选择，jquery版本 1.8  $(document).on('click','#checkAll',function() {      var flag = $("#checkAll").is(':checked');      $("input[name='chk_item']:chec
Jquery全选反选Checkbox
10-23
"Jquery全选反选Checkbox"是一个常见的功能需求，特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件，让用户能够快速地对一组复选框进行全选或反选操作。 首先...
VB.NET扩展DataGridView控件支持全选的CheckBox列
01-16
然而，原生的DataGridView控件并不直接提供全选功能，特别是在每行前面添加一个CheckBox以便用户可以一键选择所有行的功能。本教程将深入探讨如何通过扩展VB.NET中的DataGridView控件来实现这一功能。 首先，我们...
winform DataGridView表头带CheckBox全选
03-22
在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便实现全选和全不选的功能。这将大大提升用户体验，使得用户可以快速地对所有行进行操作，如批量删除、更新等。 首先，我们需要...
Checkbox全选问题
12-27
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
一个轻量级的网页遮罩层jQuery插件
akwolf
01-18 2327
使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。 其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没有写。现在就来分析一下这个组件的源码和
Js接收URL参数
akwolf
11-20 2231
对于web项目中一些参数通常都是拼接在url后面，在jsp中有request.getParameter("key")进行获取，在js中也可进行获取。 内容简单就直接贴例子了，(ps:map这个js函数在上一篇博客中有介绍) 进行跳转的页面： redirect to a new page 目标页面，进行参数接收的页面： var
js对象字面量的demo
akwolf
10-12 1942
js文件： /** * @author zhanghua */ var literal = { add: function(){ alert("add"); }, del: function(){ alert("del
jQueryplugin简单理解
akwolf
12-12 1558
jQuery不得不说是一个越用越喜爱的js框架，好处就太多了，google一下一大把，而jQuery自身提供的方法是有限的，对于要完成一个特定的复杂功能，就要自己去编写一些插件，对于这些插件具有高度的独立性和可复用性，在项目开发总可以节省大量的时间和精力，下面就把我学习jQuery Plugin的一些笔记分享给大家，如有写错的地方大家可要不吝赐教。 一、搭建jQueryPlugin最简单
Js&Jquery文档加载完事件
akwolf
10-24 1495
Jquery $(document).ready(function(){ var subjectSel = $("#subjectSel") ; //alert(subjectSel.val()) ; subjectSel.combobox({ onChange:function(newValue,oldValue){ item_
Easy-Ui 学习笔记
akwolf
10-04 1232
一、对于参数的理解 1、对于ui中的一个组件可以直接使用jquery选择一个对象之后，对其添加所有可行的属性，事件，如：                 $('#p').panel({                     title: 'akwolf',                     onLoad: function(){                         al
Ajax上传根据服务器端返回数据进行js处理
akwolf
11-19 1226
Ajax上传说白了还是使用form表单提交，在当前页面加一个iframe，将提交的内容跳转到iframe中，造成一种页面无刷新的错觉。 以前也做过上传，基本是是使用commons-fileupload组件，基本的步骤是使用servlet处理完上传之后，使用PrintWrite的对象实例输出显示内容，可以是直接输出内容，也可以是输出script进行操作如 response.getWriter()
获取iframe中内容
akwolf
02-22 929
var iframe = document.getElementById("showMsg").contentWindow.document.body ; var content = document.getElementById("showMsg").contentWindow.document.body.innerHTML;
Javascript RegExp正则表达式学习笔记
akwolf
10-01 900
什么事正则表达式：正则表达式就是一个描述通用模型的字符串对象。 正则表达式可以干什么：可以用来进行查找文本中的字符串、转换、格式化、检查、替换、截取等操作。功能是不可小觑啊。 一、语法 a)、比如说要在一段文本中进行一个字符的查找，那肯定就得指定按照什么样的规则来查
Javascript一些使用的小结
akwolf
09-29 727
1、对于一个定义的js函数，如果调用时参数不够是未指定的参数会为undefined，而调用时参数多于函数的个数时，会忽略多出的参数如： 定义一个函数： function m(p1,p2,p3){ alert(p1+"---"+p2+"-----"+p3) ; }以下面两种方式调用时： 会返回： 1---3----undefined 1---2----3 2、
全选checkbox的JavaScript实现技巧
以下将详细介绍两种不同的全选checkbox的方法。 1. 基于事件监听的全选方法 这种方法通过给一个特殊的checkbox（通常称为“全选框”）添加`onclick`事件监听器来实现。当用户点击这个全选框时，会触发一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值