文档章节

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

深圳大道
 深圳大道
发布于 2016/12/29 15:36
字数 565
阅读 3
收藏 0
<!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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/51958304

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
JQuery操作checkbox、radio

(引自 daysmileface的博客) 例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = document.getElementsByName("followers")......

JAVA_NINA
2011/12/08
0
0
使用jQuery设置元素选中的问题及解决办法

现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的selec...

阿信sxq
2015/06/01
0
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
A example for Jquery--deal with html checkbox

<!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> <met......

Adam-Lee
2011/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部