您的位置:首页 > Web前端 > JQuery

jquery边学边练1--用ul li实现单选框和复选框功能

2010-06-02 18:22 501 查看
早闻jquery大名,只是一直以来由于项目太忙,长时间没有学习,感叹啊;

最近稍空,下面一个项目很多地方需要利用“单选框”和“复选框”功能,趁空余时间,赶快磨刀。

jQuery 1.3 API 参考文档中文版
http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

<script src="jquery-1.3.2.min.js"></script>

<script language="javascript">
$(document).ready(function() {
var ul1_value = "";
var ul2_value = "";
$("#ul1 li").click(function(){
$(this).toggleClass("checked");

$("#ul1 li[class='checked']").each(function(){
ul1_value = ul1_value + "," + $(this).attr("value");
});

$("#ul1_value").val(ul1_value);
ul1_value = "";
});
$("#ul2 li").click(function(){
$(this).toggleClass("checked");
$("#ul2 li[value!='"+ $(this).attr("value")+"']").removeClass("checked");

if($(this).attr("class")=="checked"){
ul2_value = $(this).attr("value");
}

$("#ul2_value").val(ul2_value);
ul2_value = "";
});
});
</script>

<style>
.checked {
background-color:#ff0000;
font-weight:bold;
}
</style>

多选框 <input type="text" id="ul1_value"><br/>
<ul id="ul1" value="checkbox">
<li value="1" class="checked">li1</li>
<li value="2">li2</li>
<li value="3">li3</li>
<li value="4">li4</li>
</ul>
<br/>

单选框 <input type="text" id="ul2_value"><br/>
<ul id="ul2" value="radio">
<li value="1" class="checked">li1</li>
<li value="2">li2</li>
<li value="3">li3</li>
<li value="4">li4</li>
</ul>
<br/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: