jq实现checkbox全选中以及获得选中的checkbox的值

html代码

<div class="cd_zj_l">


<div class="cd_title">目录导航</div>
<div class="cv_fcv node">
	<div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户事业部</span></div>
    <ul class="node">
        <li>
            <div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户营销中心</span></div>
            <ul class="node">
                <li>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>李阳</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>宋毅</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>刘能</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵四</span></div>
                </li>
                 <div style="clear:both"></div>
            </ul>
        </li>
        <div style="clear:both"></div>
    </ul>
    <div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户事业部</span></div>
    <ul class="node">
        <li>
            <div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户营销中心</span></div>
            <ul class="node">
                <li>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>李阳</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>宋毅</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>刘能</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵四</span></div>
                </li>
                 <div style="clear:both"></div>
            </ul>
            <div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>交付中心</span></div>
            <ul class="node">
                <li>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>艾希</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>提姆</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>易</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>盖伦</span></div>
                    <div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵信</span></div>
                </li>
                 <div style="clear:both"></div>
            </ul>
        </li>
        <div style="clear:both"></div>
    </ul>
    <div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>无部门所属</span></div>
    <ul class="node">
        <li>
            <div class="tree"><input class="checkboxhand" type="checkbox"/><span>艾希</span></div>
            <div class="tree"><input class="checkboxhand" type="checkbox"/><span>提姆</span></div>
            <div class="tree"><input class="checkboxhand" type="checkbox"/><span>易</span></div>
            <div class="tree"><input class="checkboxhand" type="checkbox"/><span>盖伦</span></div>
            <div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵信</span></div>
        </li>
         <div style="clear:both"></div>
    </ul>
</div>
</div>

jq代码

百度很多checkbox选中事件不能兼容或者就是存在问题，然后就自己写了一段，只是为了记住，希望能为大家提供帮助

// JavaScript Document
$(".tree").each(function(index, element) {
        if($(this).next(".node").length>0){
			$(this).find(".switch_hand").addClass("ce_ceng_close");
		}
    });
$(".switch_hand").click(function(e){
	var ul = $(this).parent().next(".node");
	if(ul.css("display")=="none"){
		ul.slideDown();
		$(this).addClass("ce_ceng_open");
		ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
	}else{
		ul.slideUp();
		$(this).removeClass("ce_ceng_open");
		ul.find(".node").slideUp();
		ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
	}
});
$(".checkboxhand").change(function(e){
	if($(this).is(":checked")){
		$(this).parent().next(".node").find(".checkboxhand").prop("checked",true);
	}else{
		$(this).parent().next(".node").find(".checkboxhand").prop("checked",false);
	}
	checkisAll($(this));
});
function checkisAll(e){
	if($(e).parent().parent().find(".checkboxhand").length==$(e).parent().parent().find(".checkboxhand:checked").length){
		$(e).parent().parent().parent().prev(".tree").find(".checkboxhand").prop("checked",true);
	}else{
		if($(e).parent().parent().parent().prev(".tree").find(".checkboxhand").is(":checked")){
			$(e).parent().parent().parent().prev(".tree").find(".checkboxhand").prop("checked",false);
		}
	}
	if($(e).parent().parent().parent().prev(".tree").length>0){
		checkisAll($(e).parent().parent().parent().prev(".tree").find(".checkboxhand"));
	}
}

实现的效果图