快捷導(dǎo)航

jQuery多項(xiàng)選項(xiàng)卡的實(shí)現(xiàn)思路附樣式及代碼

更新時(shí)間：2014年06月03日 09:44:11 作者：

這篇文章主要介紹了jQuery多項(xiàng)選項(xiàng)卡的實(shí)現(xiàn)思路,需要的朋友可以參考下

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代碼：

復(fù)制代碼代碼如下:

 
$(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代碼：

復(fù)制代碼代碼如下:

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

您可能感興趣的文章:

相關(guān)文章

MvcPager分頁控件適用于Bootstrap
這篇文章主要為大家詳細(xì)介紹了MvcPager分頁控件，修改后適用于Bootstrap，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
javascript實(shí)現(xiàn)鏈接單選效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)鏈接單選效果的方法,可實(shí)現(xiàn)點(diǎn)擊鏈接改變其背景色的功能,同時(shí)可禁用對應(yīng)鏈接的跳轉(zhuǎn),需要的朋友可以參考下
2015-05-05
javascript prototype原型操作筆記
在 JavaScript 中，prototype 不但能讓對象共享自己財(cái)富，而且 prototype 還有尋根問祖的天性，從而使得先輩們的遺產(chǎn)可以代代相傳。
2009-12-12
JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-08-08
javascript實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊
本文通過純javascript技術(shù)實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊，支持移動(dòng)設(shè)備手勢操作，感興趣的朋友一起來學(xué)習(xí)吧
2015-08-08
JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
js操作數(shù)據(jù)庫實(shí)現(xiàn)注冊和登陸的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s操作數(shù)據(jù)庫實(shí)現(xiàn)注冊和登陸的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
前端加密常用的幾種方式匯總
這篇文章主要介紹了前端加密常用的幾種方式,前端加密技術(shù)包括Base64編碼、哈希算法、對稱加密和非對稱加密,這些方法各有特點(diǎn),適用于不同的場景,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
微信小程序中實(shí)現(xiàn)埋點(diǎn)的方法示例詳解
在小程序中實(shí)現(xiàn)埋點(diǎn)的基本思路是利用生命周期函數(shù)和事件回調(diào),插入數(shù)據(jù)上報(bào)代碼,下面將介紹如何在小程序中實(shí)現(xiàn)埋點(diǎn),并通過代碼示例進(jìn)行說明,感興趣的朋友一起看看吧
2024-04-04
Bootstrap table 服務(wù)器端分頁功能實(shí)現(xiàn)方法示例
這篇文章主要介紹了Bootstrap table 服務(wù)器端分頁功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Bootstrap table 服務(wù)器端后臺交互與分頁功能相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06