jQuery多项选项卡的实现

请勿盗版。转载请加上出处http://blog.csdn.net/yanlintao1

请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1

css样式：

@CHARSET "UTF-8";

#div{

margin-bottom:10px;

position:relative;

}

#div1{

width:153px;

padding-top:0px;

padding-left:0px;

position:absolute;

}

#div1 ul{

margin-top:0px;

padding-left:0px;

background-color:#ccc;

list-style:none;

}

#div1 ul li{

padding-left:0px;

}

#div1 ul li input{

margin-left:15px;

}

.close{

display:none;

}

.open{

display:block;

}

jquery代码：

$(function(){

var position = $("#xx").position();

$("#div1").offset({ top:position.top+35,left:position.left+10});

$("#xx").click(function(){

  $("#NG").toggleClass("open");

});



    $("#div1 input[name=ng]").click(function(){

      var arr = new Array();

      $("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();});

      $("#xx").val(arr.join(","));

    });   

});

html代码：

<div id="div">

       <div align="center" id="div2" >        

           <form id="form1">

              <input type="text" readonly="readonly" id="xx"/>

              <input type="submit"  value="查询"/>

            </form>

       </div>

       <div  id="div1">            

            <ul  class="close" id="NG" >

   <li><input type="checkbox" name="ng" value=1 />1</li>

   <li><input type="checkbox" name="ng" value=2 />2</li>

   <li><input type="checkbox" name="ng" value=3 />3</li>

</ul>  

   </div>

    </div>

请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1