jQuery多项选项卡的实现思路附样式及代码

前端技术 2023/09/10 JavaScript
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>

本文地址：https://www.stayed.cn/item/26260

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案