这里是我初步学习jquery后中巨做的一个关于复选框的小功能:

    点击右边选项如果勾上,对应的左边三个小项全部选中,反之全不选,

左边只要有一个没选中,右边大项就取消选中,反之左边全部选中的话,左边大项即为选中,下面是样式图。

<div class="box">
        <table id="table1" class="mytable">
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="chkPromote" class="parentfunc" />图书管理
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox1" />新增图书管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox2" />修改图书管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox3" />删除图书管理
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox4" class="parentfunc" />会员管理
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox5" />新增会员管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox6" />修改会员管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox7" />删除会员管理
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox8" class="parentfunc" />系统设置
                    </span>
                </td>
                <td>
                    <span>
                        <input type="checkbox" id="Checkbox9" />管理员设置
                    </span> <span>
                        <input type="checkbox" id="Checkbox10" />角色管理
                    </span> <span>
                        <input type="checkbox" id="Checkbox11" />权限管理
                    </span>
                </td>
            </tr>

</table>

</div>

jQuery代码如下:

<script type="text/javascript">

  //页面加载
        $(function () {
            //点任意大项时
            $("tr td:first-child span input").click(function () {
     //利用点击的的大项的位置找到它所在的同级td下的所有小项设置他们的checked(大项是选中那就全部选中,反之、、、就能简单实现全选和全部选的功能)
                $(this).parents("td").siblings().find("input[type=checkbox]").prop("checked",$(this).prop("checked"));
            })

//点任意小项时
            $("tr td:last-child span input").click(function () {
                var a = 0;

    //循环点击当前小项的同级的所有小项,所有的小项的选中情况
                for (var i = 0; i < $(this).parents("td").children.length + 1 ; i++) {
      //判断如果哪怕找到一个小项为没有选中,那么将对应的大项设为不选中。
                    if ($(this).parents("td").children(":eq(" + i + ")").children().prop("checked") == false) {
        //设大项为不选中
                        $(this).parents("td").siblings().find("input[class=parentfunc]").prop("checked", false);

      //只要有一个小项为false那么就a+1
                        a++;
                    }
                }

    //判断这个a变量,如果等等于0就说明所有小项都选中了,那么就把对应的大项选中
                if (a == 0) {
      //选中大项
                    $(this).parents("td").siblings().find("input[class=parentfunc]").prop("checked", true);
                }
            })
        })
    </script>

  

jQuery关于复选框的基本小功能的更多相关文章

  1. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  2. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  3. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  4. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  5. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  6. jquery判断复选框是否选中

    jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...

  7. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  8. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  9. jquery实现复选框全选,全不选,反选中的问题

    今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...

随机推荐

  1. How to use Log4cplus

    Introduction Log4cplus is derived by the popular Log4j written in java.<br>This tutorial show ...

  2. php遍历数组赋值

    <?php $arr=array( array("num"=>100,"name"=>"Liuxy","scor ...

  3. centos 开机执行的命令

    centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...

  4. 浅谈App原生开发、混合开发及HTML5开发的优劣

    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...

  5. jquery mobile开发中常见的问题(转载)

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 处理方法: 在head标签内加入: <meta name="viewport" content="w ...

  6. Oracle GoldenGate 详解

    一.Oracle GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与目标数据库的数据 ...

  7. ZT 初始化 const 成员和引用类型成员(C++)

    初始化 const 成员和引用类型成员(C++) 初始化 const 成员和引用类型成员的问题,在 C++ 教材中讲述初始化列表的章节应该都有讲过,但是因为平时用得少,所以可能有不少人没注意到.待到用 ...

  8. LINUX基础了解

  9. 中间人攻击-ARP毒化

    感谢Heee投递 中间人攻击虽然古老,但仍处于受到黑客攻击的危险中,可能会严重导致危害服务器和用户.仍然有很多变种的中间人攻击是有效的,它们能够很容易的欺骗外行并且入侵他们.正如字面意思一样,中间人攻 ...

  10. 一个理解PHP面向对象编程(OOP)的实例

    <?php //定义一个“人”类作为父类 class Person{ //声明一个新变量公共变量$name,可被任何包中的类访问 public $name;//人的名字 public $sex; ...