我要实现的如下图。选择父节点时选择所有子节点,选择子节点自动选中父节点
我实现的方法如下。 要求把js改成jquery写,求高人啊(复制我的代码可直接运行)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultTest.aspx.cs" Inherits="aUser_DefaultTest" %><!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="server">
    <title></title>
    <script type="text/javascript">
        Array.prototype.inArray = function (value) {
            var i;
            for (i = 0; i < this.length; i++) {
                if (this[i] === value) { return true; }
            } return false
        };
        function checkSibling(list, id) { //检查同辈的checkbox是否有被选中的。无被选中的则返回-1
            var index = -1;
            for (i = 0; i < list.length; i++) {
                if (list[i].checked == true && list[i].id.indexOf(id) != -1 && id.split('_').length == list[i].id.split('_').length) {
                    index = 1;
                    break;
                }
            }
            return index;
        }
        function changebox(list, id, t) {
            var ids = id.split("_");
            var arr = new Array();
            var lastid = "";
            var siblingid = "";
            var a = "";
            for (k = 0; k < ids.length; k++) {
                a += a.length == 0 ? ids[k] : '_' + ids[k];
                if (k == ids.length - 2) { siblingid = a + '_' } //得到与当前checkbox同辈的命名标识
                if (k == ids.length - 1) { lastid = a + '_' } //得到一个往下查找的ID命名标识
                arr.push(a); //得到一个直系往上查找的id数组
            }
            var index = checkSibling(list, siblingid); //判断当前checkbox是否有与其同辈的已经被选中
            for (i = 0; i < list.length; i++) {
                if (list[i].type == "checkbox") {
                    if (t == false && index != -1) {
                        //如果当前为取消选中时且同辈的有被选中的:则不往上查找,保证只往下查找
                        if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1) && list[i].id.split('_').length > id.split("_").length) {
                            list[i].checked = t;
                        }                    } else {
                        if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1)) {
                            list[i].checked = t;
                        }
                    }
                }
            }
        }
        function bindCheckbox() {
            var list = document.getElementById("boxlist").getElementsByTagName("input");
            for (i = 0; i < list.length; i++) {
                (function (n) {
                    if (list[n].type == "checkbox") {
                        var id = list[n].id;
                        var marginv = id.split("_").length * 20;
                        document.getElementById(id).style.margin = "0px 0px 0px " + marginv + "";
                        list[n].onclick = function () {
                            changebox(list, id, this.checked);
                        }
                    }
                })(i)
            }
        }
        window.onload = function () {
            bindCheckbox();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="cursor: pointer" id="boxlist">
        <div style="color: #525252; font-weight: bold">
            <input id="cbox1" value="1" type="checkbox"><label>分类1</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox1_2" value="2" type="checkbox"><label for="cbox1_2" value="2">分类1.1</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox1_3" value="3" type="checkbox"><label for="cbox1_3" value="3">分类1.2</label></div>
        <div style="clear: both">
        </div>
        <div style="color: #525252; font-weight: bold">
            <input id="cbox2" value="4" type="checkbox"><label>分类2</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox2_5" value="5" type="checkbox"><label for="cbox2_5" value="5">分类2.1</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox2_6" value="6" type="checkbox"><label for="cbox2_6" value="6">分类2.2</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox2_7" value="7" type="checkbox"><label for="cbox2_7" value="7">分类2.3</label></div>
        <div style="clear: both">
        </div>
        <div style="color: #525252; font-weight: bold">
            <input id="cbox3" value="8" type="checkbox"><label>分类3</label></div>
        <div style="width: 200px; float: left">
            <input id="cbox3_9" value="9" type="checkbox"><label for="cbox3_9" value="9">分类3.1</label></div>
        <div style="clear: both">
        </div>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    为嘛非得用jquery.
    原生的js就不错么
      

  2.   


    $(function () {
                $("input[type='checkbox']").click( function () {
                    var id = $(this).attr("id");

                    var fid = id.substring(0, id.indexOf("_"));
                    $("#" + fid).attr("Checked", $(this).prop("checked"));
                    $("input[id ^='" + id+"']").attr("Checked", $(this).prop("checked"));
                });
            });
      

  3.   

    http://bbs.csdn.net/topics/390360310,下载下来,看看权限那个页面,和你的要求一样,源码自己复制
      

  4.   

    楼主, 我很真诚地告诉你, 这功能真的是很简单的, 自己尝试找个jQuery帮助文档或网上查查资料实现一下.我第一次使用jQuery也是查看帮助文档的, 实现一个数据采集功能, 写了三千行的jQuery代码, 觉得jQuery挺好用的. CheckBox全选、全不选、点选、行内点选功能(JS版和JQuery版)