Jquery 多选全选/取消选项卡切换获取选中的值

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JS测试</title>

    <meta charset="utf-8" />

    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <style type="text/css">

        .leftdiv {

            width: 200px;

            height: 350px;

            float: left;

            border: 1px solid #ff0000;

        }

        .ulnav {

            list-style: none;

        }

        .ulnav li{

             width:80px;

             float:left;

        }

        .unonli {

            margin: 8px;

            padding:3px;

            border: 1px solid #0094ff;

            cursor: pointer;

            text-align:center;

        }

        .onli {

            margin: 8px;

            padding:3px;

            background-color: #0094ff;

            border: 1px solid #0094ff;

            color: #ffffff;

            text-align:center;

        }

        .rightdiv {

            margin-left:10px;

            width: 600px;

            height: 350px;

            float: left;

            border: 1px solid #000000;

        }

        .ulnav {

            list-style: none;

        }

        .rightdiv li {

            width:100px;

            margin: 8px;

            padding:3px;

            border: 1px solid #d9d5d5;

            text-align:center;

            float:left;

        }

        .ulstudent {

            list-style:none;

        }

        #stu_class2 {

            display:none;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#chkall").prop("class", "#stu_class1") //初始化

            $(".ulnav").find("li").click(function () {

                var objId = "#stu_" + $(this).prop("id");

                $(".ulnav").find("li").removeClass("onli").addClass("unonli");

                $(this).removeClass("unonli").addClass("onli");

                $(".ulstudent").css("display", "none");

                $("#chkall").prop("class", objId) //传递参数

                $(objId).show();

                SetChkStatus();

            });

            $("#chkall").click(function () {

                var objectli = $("#chkall").prop("class");

                $(this).prop('checked', this.checked)

                $(objectli).find(":checkbox").prop('checked', this.checked)

                GetSelectValues();

            });

            $(".ulstudent").find(":checkbox").click(function () {

                var objectli = $("#chkall").prop("class");

                var expr1 = $(objectli).find(":checkbox:checked");

                var expr2 = $(objectli).find(":checkbox");

                var selectAll = $(expr1).length == $(expr2).length;

                $('#chkall').prop('checked', selectAll);

                GetSelectValues();

            });

            function GetSelectValues()

            {

                var list = new Array();

                $(".ulstudent").find(":checkbox:checked").each(function () {

                    list.push($(this).attr("value"))

                });

                var values = list.join(",");

                $("#selectHideValue").val(values);

                alert($("#selectHideValue").val());

            }

            function SetChkStatus()

            {

                var objectli = $("#chkall").prop("class");

                var expr1 = $(objectli).find(":checkbox:checked");

                var expr2 = $(objectli).find(":checkbox");

                var selectAll = $(expr1).length == $(expr2).length;

                $('#chkall').prop('checked', selectAll);

            }

        });

    </script>

</head>

<body>

    <div class="leftdiv">

        <ul class="ulnav">

            <li id="class1" class="onli">班级1</li>

            <li id="class2" class="unonli">班级2</li>

        </ul>

    </div>

    <div class="rightdiv">

        <div style="margin:8px 50px;"><input type="checkbox" id="chkall" />全选<input type="hidden" id="selectHideValue" /></div>

        <ul id="stu_class1" class="ulstudent">

            <li><input type="checkbox" value="1001" />1年级张三1</li>

            <li><input type="checkbox" value="1002" />1年级张三2</li>

            <li><input type="checkbox" value="1003" />1年级张三3</li>

            <li><input type="checkbox" value="1004" />1年级张三4</li>

            <li><input type="checkbox" value="1005" />1年级张三5</li>

            <li><input type="checkbox" value="1006" />1年级张三6</li>

            <li><input type="checkbox" value="1007" />1年级张三7</li>

            <li><input type="checkbox" value="1008" />1年级张三8</li>

        </ul>

        <ul id="stu_class2" class="ulstudent">

            <li><input type="checkbox" value="2001" />2年级张三1</li>

            <li><input type="checkbox" value="2002" />2年级张三2</li>

            <li><input type="checkbox" value="2003" />2年级张三3</li>

            <li><input type="checkbox" value="2004" />2年级张三4</li>

            <li><input type="checkbox" value="2005" />2年级张三5</li>

            <li><input type="checkbox" value="2006" />2年级张三6</li>

            <li><input type="checkbox" value="2007" />2年级张三7</li>

            <li><input type="checkbox" value="2008" />2年级张三8</li>

        </ul>

    </div>

</body>

</html>

Jquery 多选全选/取消选项卡切换获取选中的值的更多相关文章

jQuery实现的全选、反选和不选功能
适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...
jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery设置checkbox全选（区别jQuery版本）
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
jQuery实现的全选、反选和获取当前所有选中的值功能
链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...
jquery中的全选，全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
基于JQ的多选/全选/反选及获取选中的值
 <!DOCTYPE html> <html lang="en"> <head> <met ...
layui 复选框checkbox 实现全选全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

jvm系列 (五) ---类加载机制
类的加载机制目录 jvm系列(一):jvm内存区域与溢出 jvm系列(二):垃圾收集器与内存分配策略 jvm系列(三):锁的优化 jvm系列 (四) ---强.软.弱.虚引用我的博客目录什么是类 ...
二：搭建一个webpack3.5.5项目：建立项目的webpack配置文件
第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...
C语言中复数运算及调用blas,lapack中复数函数进行科学计算
C语言中常用的数据类型主要int, float ,double ,char 等,但在科学运算中复数扮演着重要角色.这里讲下C语言中的复数运算以及如何调用blas,lapack库中的复数函数来进行科学计 ...
STM32—无需中断来实现使用DMA接收串口数据
本节目标: 通过DMA,无需中断,接收不定时长的串口数据描述:当在串口多数据传输下,CPU会产生多次中断来接收串口数据,这样会大大地降低CPU效率,同时又需要CPU去做其它更重要的事情,我们应该如何 ...
html加载和解析流程
之前查找资料了解了html的整个渲染过程,对于理解页面加载帮助还是蛮大的,下面我用visio把它画成流程图,便于直观理解好吧,居然要150字才能发布............ 浏览器渲染过程浏览器渲 ...
NET Core度身定制的AOP框架
NET Core度身定制的AOP框架多年从事框架设计开发使我有了一种强迫症,那就是见不得一个应用里频繁地出现重复的代码.之前经常Review别人的代码,一看到这样的程序,我就会想如何将这些重复的代码 ...
201521123082 《Java程序设计》第6周学习总结
201521123082 <Java程序设计>第6周学习总结标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念 ...
【Alpha阶段】第六次scrum meeting
一.会议照片二.会议内容姓名学号负责模块昨日任务完成度今日任务杨爱清 099 界面设计和交互功能完成设计界面杨立鑫 100 数据库搭建和其他完成将数据库与其他模块连接林钊 ...
201521123078 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 public static vo ...
201521123025<java程序设计>第五周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1.2 ...

Jquery 多选全选/取消 选项卡切换 获取选中的值

Jquery 多选全选/取消 选项卡切换 获取选中的值的更多相关文章

随机推荐

热门专题

Jquery 多选全选/取消选项卡切换获取选中的值

Jquery 多选全选/取消选项卡切换获取选中的值的更多相关文章