jquery实现checkbox 全选/全不选的通用写法

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        //name 是html表单专用于区别各组 chechbox 的属性， 不要用id(必须唯一)或者其它属性
        function getValues() {
            var aV = getCheckboxValues("a");
            var bV = getCheckboxValues("b");
            var cV = getCheckboxValues("c");

var result = "a组选中值: " + (aV=="" ? "未选中任何值" : aV) + "\n" +
                "b组选中值: " + (bV == "" ? "未选中任何值" : bV) + "\n" +
                "c组选中值: " + (cV == "" ? "未选中任何值" : cV);

alert(result);
        }

function getCheckboxValues(name) {
            return $(":checkbox[name="+name+"]:checked").map(function(){ 
                return $(this).val();
            }).get().join(",");
        }

function chkAll(obj) {
            var name = $(obj).attr("name");
            //也许你觉得我写得太复杂， 但jquery 版本众多， 可以学点东西总是好的
            //1. jquery 1.6 以上
            //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
            //2. jquery 1.6 以下
            //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));
            //3. 通用写法
            $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <div >
        <span>第1组(a)：<input type="checkbox" name="aAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="a" value="a1" checked="checked" />a1
        <input type="checkbox" name="a" value="a2" checked="checked"  />a2
        <input type="checkbox" name="a" value="a3" />a3
        <input type="checkbox" name="a" value="a4" />a4<br />

<span>第2组(b)：<input type="checkbox" name="bAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="b" value="b1" />b1
        <input type="checkbox" name="b" value="b2" checked="checked" />b2
        <input type="checkbox" name="b" value="b3" checked="checked"  />b3
        <input type="checkbox" name="b" value="b4" />b4<br />

<span>第3组(c)：<input type="checkbox" name="cAll" onclick="chkAll(this)" />全选/全不选</span>
        <input type="checkbox" name="c" value="c1" />c1
        <input type="checkbox" name="c" value="c2" />c2
        <input type="checkbox" name="c" value="c3" checked="checked" />c3
        <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />

<br />
        <input type="button" value="查找每组的选中的值" onclick="getValues()" />
    </div>
</body>
</html>

赞 (0)

相关推荐

  • jquery实现checkbox全选全不选的简单实例

    demo一: 复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • jquery实现全选和全不选功能效果的实现代码【推荐】

    网上好多代码都是错的 <!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=&qu

  • 基于jQuery实现复选框的全选 全不选 反选功能

    本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家. jQuery代码: 复制代码 代码如下: $(function(){             $("#checkedAll").click(function(){                 $('[name=items]:checkbox').attr('checked',true);             });             $("#checkedNo&quo

  • jquery 实现checkbox全选，反选，全不选等功能代码(奇数)

    设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): 复制代码 代码如下: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox

  • jquery实现全选、全不选以及单选功能

    jquery实现全选、全不选以及单选功能

    效果图: 代码如下: <link rel="stylesheet" href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.m

  • JQuery选中checkbox方法代码实例（全选、反选、全不选）

    JQuery选中checkbox方法代码实例（全选、反选、全不选）

    1.checkbox list选择 代码: <!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 runat="serv

  • jQuery CheckBox全选、全不选实现代码小结

    直接上代码. Index $(function() { $("#CheckAll").click(function() { var flag = $(this).attr("checked"); $("[name=subBox]:checkbox").each(function() { $(this).attr("checked", flag); }) }) }) 全选 1 2 3 4 [Ctrl+A 全选 注:如需引入外部J

  • 基于JQuery实现CheckBox全选全不选

    所以我就参照网上的例子试着自己写了一个,达到了自己想要的效果,其实这也是一个很简单的例子,其中有不足的地方还望大家能够给予指出.下面把代码贴出来给大家看看 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkAll.aspx.cs" Inherits="checkAll" %> <!DOCTYPE html PUBLI

  • jquery全选/全不选/反选另一种实现方法(配合原生js)

    复制代码 代码如下: <!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=&qu

随机推荐