点击div如何实现复选框效果？下面代码哪里有错？

  <div class="TabListItem">
        <div class="ListItem">
        <div class="ListItem1">
            <div class="ItemIcon">
                <span class="Icon Icon1"></span>
            </div>
        </div>
        </div>
        <div class="ListItem">
        <div class="ListItem1-2" >
            <div class="ItemIcon">
                <span class="Icon Icon2"></span>
            </div>
        </div>
        </div>
    </div>

            $(document).ready(function(){
        $(".ListItem").click(function(){
            $(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid #f43530");
          /*  $(".ListItem").find(".ItemIcon").removeClass("SelectedItem");*/
            $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");
            if($(".ListItem").eq($(this).index()).find(".SelectedItem").length==1){
                $(".ListItem").eq($(this).index()).find(".ItemIcon").removeClass("SelectedItem");
                $(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid ##efeff4");
            }
        });

        $(".ListItem").click(function(){
                //如果已经被选中
                if($(this).find(".ItemIcon").hasClass("SelectedItem")){
                    $(this).find(".ItemIcon").removeClass("SelectedItem");
                    $(this).find(".ItemIcon").css("border","1px solid #efeff4");
                }
                //如果没被选中
                else{
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid #f43530");
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");
                }
        });

你这写的也太复杂了吧