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

早闻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/>