input选择框 勾选 不勾选 数组的操作

来源:互联网 发布:北京婚纱摄影 知乎 编辑:程序博客网 时间:2024/06/09 23:24
<script type="text/javascript">
        $(function(){


          $(".st_tree").SimpleTree({
          
            /* 可无视代码部分*/
            click:function(a){
              if(!$(a).attr("hasChild"))
                console.log($(a).attr("ref"));
            }
            
          });
          var num=0;
          var arr=[];
          var oBox= $(".part")
          /*$(".st_tree li").click(function(){
            num=num+1;
            arr.push($(this).text());
            console.log("arr");
            $(".g-mailinp").val(arr);
            console.log(num)
            console.log($(".g-mailinp").val())
            console.log($(this).text());
            
          })*/
          oBox.click(function(){
            if(this.checked){
                console.log($(this).parent().text())//选中后需要执行的方法
                arr.push($(this).parent().text());
                $(".g-mailinp").val(arr);
                console.log(arr.length)
            } else{
              //删除未被勾选的元素
              //遍历勾选的元素
                arr.pop($(this).parent().text());
                $(".g-mailinp").val(arr);
                console.log("未选中")  //未选中事件
              }
          })
        });

      </script>


<div class="st_tree">
                          <ul>
                            <li>组织机构栏目</li>
                            <li>公司一</li>
                            <ul show="true">
                              <li>部门一</li>
                              <li>部门二</li>
                            </ul>
                            <li>公司二</li>
                            <ul>
                              <li>部门一</li>
                              <li>部门一</li>
                              <li>部门三</li>
                              <ul>
                                <li><input type="checkbox" id="" value="option1" class="part">角色一</li>
                                <li>小分队2</li>
                                  <ul>
                                  <li><input type="checkbox" id="" value="option1" class="part">角色2</li>
                                  <li>小分队2-2</li>
                                      <ul>
                                      <li><input type="checkbox" id="" value="option1" class="part">角色3</li>
                                      <li>小分队2-2-2</li>
                                        <ul>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-1-1-1</li>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-2-2-2</li>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-1-1-1</li>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-2-2-2</li>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-1-1-1</li>
                                        <li><input type="checkbox" id="" value="option1" class="part">角色4-2-2-2</li>
                                      </ul>
                                    </ul>
                                </ul>
                              </ul>
                            </ul>
                          </ul>
                        </div>
        </div>


 <script src="style/js/SimpleTree.js"></script>

0 0
原创粉丝点击