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/>
最近稍空,下面一个项目很多地方需要利用“单选框”和“复选框”功能,趁空余时间,赶快磨刀。
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/>
相关文章推荐
- jquery边学边练2--用ul li实现单选框和复选框功能(强化版,优化版)
- jquery-ul-li实现分页功能
- jquery实现ul列表中点击li选择radio
- jquery 操作单选框,复选框,下拉列表实现代码
- JQuery实现列表中复选框全选反选功能封装
- jquery 操作单选框,复选框,下拉列表实现代码
- jquery实现复选框多选、单选、全不选功能,很实用
- 天易20----jquery实现复选框的全选与全不选功能
- jquery 操作单选框,复选框,下拉列表实现代码
- 常见js实现功能单选框、复选框、通过div模拟下拉列表框...
- JQuery中两个ul标签的li互相移动实现方法
- 关于table的td和ul元素li隔行变色的功能实现
- 使用jQuery实现单选框和复选框以及select
- 基于jquery实现复选框全选,反选,全不选等功能
- JQuery实现列表中复选框全选反选功能封装(推荐)
- 基于jQuery实现复选框的全选 全不选 反选功能
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- jquery实现动态创建页面元素(ul,li列表实例)
- jquery实现HTML复选框变单选框