- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>JQuery实现全选和反选</title>
- <script language="javascript" type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- function CheckAll()
- {
- //取消反选的选中状态
- if($("#otherCheck")[0].checked)
- {
- $("#otherCheck")[0].checked=false;
- }
- if($("#allCheck")[0].checked)
- {
- //从div1中获取所有属性type=checkbox的input元素
- $('#div1 input[@type=checkbox]').each(function(i)
- {
- this.checked=true;
- });
- }
- else
- {
- $('#div1 input[@type=checkbox]').each(function(i)
- {
- this.checked=false;
- });
- }
- }
- function CheckOther()
- {
- //取消全选的选中状态
- if($("#allCheck")[0].checked)
- {
- $("#allCheck")[0].checked=false;
- }
- if($("#otherCheck")[0].checked)
- {
- $('#div1 input[@type=checkbox]').each(function(i)
- {
- if(this.checked)
- {
- this.checked=false;
- }
- else
- {
- this.checked=true;
- }
- });
- }
- else
- {
- $('#div1 input[@type=checkbox]').each(function(i)
- {
- if(this.checked)
- {
- this.checked=false;
- }
- else
- {
- this.checked=true;
- }
- });
- }
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="div1">
- <input type="checkbox"/>A<br />
- <input type="checkbox"/>B<br />
- <input type="checkbox"/>C<br />
- <input type="checkbox"/>D<br />
- <input type="checkbox"/>E<br />
- <input type="checkbox"/>F<br />
- <input type="checkbox"/>G<br />
- </div>
- <div id="div2">
- <input type="checkbox" id="allCheck" οnclick="CheckAll();" />全选
- <input type="checkbox" id="otherCheck" οnclick="CheckOther();" />反选
- </div>
- </div>
- </form>
- </body>
- </html>
select 全选和反选
最新推荐文章于 2024-09-04 20:18:34 发布