 
@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> 

您可能感興趣的文章:

ionic js 模型 $ionicModal 可以遮住用戶主界面的內容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶主界面的內容框的相關資料,需要的朋友可以參考下
2016-06-06
JS設置下拉列表框當前所選值的方法
這篇文章主要介紹了JS設置下拉列表框當前所選值的方法,涉及JavaScript結合jsp動態(tài)設置select下拉列表框的相關技巧,需要的朋友可以參考下
2015-12-12
JavaScript實現(xiàn)簡單日歷效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
webpack多頁面開發(fā)實踐
這篇文章主要介紹了webpack多頁面開發(fā)實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
如何在webpack項目中調試loader插件
最近在學習webpack，本文主要介紹了loader插件的調試方法，需要的朋友們下面隨著小編來一起學習學習吧
2021-06-06
基于JavaScript簡單實現(xiàn)一下新手引導效果
這篇文章主要為大家詳細介紹了如何基于JavaScript簡單實現(xiàn)一下新手引導效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
2023-03-03
uniapp自定義tabbar的方法(支持中間凸起、角標、動態(tài)隱藏tab和全端適用)
一個項目有多個角色,比如醫(yī)生和患者,tabBar跳轉的路徑不一樣,但是在pages.json中無法配置多個tabBar,這時候就要自定義tabBar了,下面這篇文章主要給大家介紹了關于uniapp自定義tabbar(支持中間凸起、角標、動態(tài)隱藏tab和全端適用)的相關資料,需要的朋友可以參考下
2023-04-04
javascript包裝對象實例分析
這篇文章主要介紹了javascript包裝對象,實例分析分析了javascript對象操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
JS對象與json字符串格式轉換實例
這篇文章主要介紹了JS對象與json字符串格式轉換方法,以實例的形式詳細講述了js對象與json字符串格式轉換的技巧,需要的朋友可以參考下
2014-10-10
小程序中設置緩存過期的實現(xiàn)方法
這篇文章主要介紹了小程序中設置緩存過期的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01