jq 三级复选框操作

 $("input:checkbox.grandfather").click(function () {
            if ($(this).prop("checked") == true) {
                $(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);
            } else {
                $(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);
            }
        });

        $("input:checkbox.father").click(function () {
            if ($(this).prop("checked") == true) {
                $(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);
                $(this).parents("li").parents("li").find(".grandfather").eq(0).prop("checked", true);
            } else {
                $(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);
                if ($(this).parents("li").parents("li").eq(0).find("input:checkbox:not(.grandfather):checked").length == 0) {
                    $(this).parents("li").parents("li").eq(0).find(".grandfather").eq(0).prop("checked",false);
                }
            }
        });

        $("input:checkbox.son").click(function () {
            debugger;
            if ($(this).prop("checked") ==true) {
                $(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked", true);
                $(this).parents("li").parents("li").parents("li").eq(0).find("input:checkbox.grandfather").prop("checked", true);
            } else {
                if ($(this).parents("li").parents("li").eq(0).find("input:checkbox:not(.father):checked").length == 0) {
                    $(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked",false);
                }
                if ($(this).parents("li").parents("li").parents("li").eq(0).find("input:checkbox:not(.grandfather):checked").length == 0) {
                    $(this).parents("li").parents("li").parents("li").eq(0).find("input:checkbox.grandfather").prop("checked",false);
                }
            }
        });

  

<ul id="trees">
 <li><input type="checkbox" value="1" id="cb1" class="grandfather">立波阿姨
       <ul>
        <li><input type="checkbox" value="5" id="cb2" class="father">页
     <ul><li><input type="checkbox" value="5" id="cb3" class="son">MM们</li></ul>
</li></ul>
</li></ul>

  

时间: 2024-10-09 17:32:22

jq 三级复选框操作的相关文章

复选框操作

<script>     $(function () {         //查找id=tab的表格,下面所有的tr,下面的所有td,第一个td下面复习框的点击事件.         $("#tab tr>td:nth-child(1)").find("input[type='checkbox']").bind("click", function () {             if ($(this).attr("c

C#:复选框操作类

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 using System; using System.Collections.Gener

python之tkinter使用-复选框操作

1 # tkinter复选框操作 2 3 import tkinter as tk 4 5 root = tk.Tk() 6 root.title('问卷调查') 7 root.geometry('220x80') # 设置窗口大小 8 9 flag_1 = False 10 flag_2 = False 11 flag_3 = False 12 list_content = ['你的爱好是:'] 13 hobby_list = ['游泳', '唱歌', '旅游'] 14 15 16 def c

原生js实现三级复选框

工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三级复选框</title> </head> <body&

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

Qt树形列表复选框操作

void CCheckBoxDialog::treeItemsChangeStol(QTreeWidgetItem *pCurrentItem, int){     if (m_itemsCount <= 0)//没有子节点,不存在选中操作     {         updateComboInfoStol();         return;     } if (Qt::Checked == pCurrentItem->checkState(0))     {         //QTree

【jQuery】对于复选框操作的attr与prop

这个是在jQuery1.6版本之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知,在jQuery中可以用attr()取出节点的属性,然而对于checkbox却不是这样了,比如我要取出其是否被选中的属性checked,attr("checked")去取没有选中的复选框是undefinded的,只能取出被选中复选框的属性.这个问题,导致我在一个条件判断中忙活了比较久的事件.查了一下发现,在jQuery1.6版本之后,你取复选框有没有被选中,要用prop

selenium之复选框操作

HTML源码: <!DOCTYPE html> <div lang="en"></div></div> <head> <meta charset="UTF-8"> <title>多选文本框</title> </head> <body> <from> <input type="radio" name="

Jquery选择复选框操作

1 <script type="text/javascript"> 2 jQuery(function($){ 3 //全选 4 $("#btn1").click(function(){ 5 $("input[name='checkbox']").attr("checked","true"); 6 }) 7 //取消全选 8 $("#btn2").click(function