jQuery应用实例3：全选、二级联动
程序员文章站
2022-03-10 08:21:12
全选： 这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多： 全选和全不选</tit ......</div>
<div class="content">
<p>全选：</p>
<p>这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378221.html</p>
<p>如果使用jQuery则会方便很多：</p>
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_closed_8f715041-d96b-4829-8762-3ad8fbfbc4ed" class="code_img_closed" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY2NDY0LmpwZw==" alt="jQuery应用实例3：全选、二级联动" title="jQuery应用实例3：全选、二级联动"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_opened_8f715041-d96b-4829-8762-3ad8fbfbc4ed" class="code_img_opened" style="display: none" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY5OTc3LmpwZw==" alt="jQuery应用实例3：全选、二级联动" title="jQuery应用实例3：全选、二级联动"><pre class="brush: javascript;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#checkAll").click(function(){
//$("tbody input").attr("checked",this.checked);
//这种方式对高版本jQuery不适用，下边方法适用于所有版本
$("tbody input").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center">
<thead>
<tr>
<th><input type="checkbox" id="checkAll" /></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html></pre>
View Code
<p> </p>
<p> </p>
<p>二级联动：</p>
<p>这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378459.html</p>
<p>使用jQuery实现：</p>
<p> </p>
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_closed_d4a23115-6ead-44e6-a952-78afbb5bfe8e" class="code_img_closed" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY2NDY0LmpwZw==" alt="jQuery应用实例3：全选、二级联动" title="jQuery应用实例3：全选、二级联动"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_opened_d4a23115-6ead-44e6-a952-78afbb5bfe8e" class="code_img_opened" style="display: none" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY5OTc3LmpwZw==" alt="jQuery应用实例3：全选、二级联动" title="jQuery应用实例3：全选、二级联动"><pre class="brush: javascript;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面重新布局</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");
$("#province").change(function() {
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//3.遍历二维数组中的省份
$.each(cities, function(i, n) {
//4.判断用户选择的省份和遍历的省份
if(val == i) {
//5.遍历该省份下的所有城市
$.each(cities[i], function(j, m) {
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
</head>
<body>
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</body>
</html></pre>
View Code
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/128311.html">
jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案 </a>
</p>
<p>
下一篇： <a href="/article/128313.html">
jQuery应用实例4：下拉列表 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1790692.html" target="_blank" title="jQuery结合PHP+MySQL实现二级联动下拉列表[实例]">
<h2>
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] </h2>
</a>
</li>
<li>
<a href="/article/1490446.html" target="_blank" title="jQuery应用实例3：全选、二级联动">
<h2>
jQuery应用实例3：全选、二级联动 </h2>
</a>
</li>
<li>
<a href="/article/1490348.html" target="_blank" title="jQuery应用实例3：鼠标经过显示离开隐藏">
<h2>
jQuery应用实例3：鼠标经过显示离开隐藏 </h2>
</a>
</li>
<li>
<a href="/article/1132460.html" target="_blank" title="jquery json ajax 二级联动菜单实例">
<h2>
jquery json ajax 二级联动菜单实例 </h2>
</a>
</li>
<li>
<a href="/article/1036064.html" target="_blank" title="jQuery+JSON实现AJAX二级联动实例分析">
<h2>
jQuery+JSON实现AJAX二级联动实例分析 </h2>
</a>
</li>
<li>
<a href="/article/755773.html" target="_blank" title="ajax+php无刷新二级联动菜单的应用实例">
<h2>
ajax+php无刷新二级联动菜单的应用实例 </h2>
</a>
</li>
<li>
<a href="/article/748368.html" target="_blank" title="jQuery+JSON实现AJAX二级联动实例分析_jquery">
<h2>
jQuery+JSON实现AJAX二级联动实例分析_jquery </h2>
</a>
</li>
<li>
<a href="/article/745084.html" target="_blank" title="jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery">
<h2>
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery </h2>
</a>
</li>
<li>
<a href="/article/722238.html" target="_blank" title="jquery json ajax 二级联动菜单实例">
<h2>
jquery json ajax 二级联动菜单实例 </h2>
</a>
</li>
<li>
<a href="/article/718193.html" target="_blank" title="jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery">
<h2>
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>