位置：首页>> 网络编程>> JavaScript>> js全选/全不选/反选 checkbox代码

js全选/全不选/反选 checkbox代码

　来源：asp之家　发布时间：2008-03-18 13:00:00　

标签：全选,反选,checkbox,js

全选、全不选、反选这几个功能我们经常会用到，如我们可以用在文章列表管理页面，也可以用在音乐播放页面，使用全选我们可以很方便的进行批量操作，如删除文章数据，音乐播放列表播放等等。当然这个功能一般是使用JS来实现的。

下面这个是我以前收集的代码，全选、全不选、反选功能都有了：

<html><head><title>音乐网站那种全选反选连续播放</title><script language="javascript">function MusicClass(form,chkboxName,btn1,btn2,btn3,btn4){var obj = { SelectAll:btn1, ClearAll:btn2, SelectOther:btn3, PlayMusic:btn4 };var box = document.getElementsByName(chkboxName);Function.prototype.ChkMusic = function (){var me = this;return function (){for (var i=0;i<box.length;i++){me(i);}}}obj.SelectAll.onclick = function(i){ box[i].checked = true; }.ChkMusic();obj.ClearAll.onclick = function(i){ box[i].checked = false; }.ChkMusic();obj.SelectOther.onclick = function(i){ box[i].checked = !box[i].checked }.ChkMusic();obj.PlayMusic.onclick = function (){for (var i=0;i<box.length;i++){if (box[i].checked){form.submit();return;}}alert("对不起，请至少选择一首歌曲再播放！");}}window.onload = function (){MusicClass(document.forms[0],'MusicID',document.all.All,document.all.Clear,document.all.Other,document.all.Play);}</script></head><body><form action=" method="get"><input type='checkbox' name='MusicID' value="1" />东风破<br /><input type='checkbox' name='MusicID' value="2" />Super Star <br /><input type='checkbox' name='MusicID' value="3" />算你狠 <br /><input type='checkbox' name='MusicID' value="4" />十年 <br /><input type='checkbox' name='MusicID' value="5" />痴心绝对 (爱上痞子男 <br /><button id="All">全选</button><button id="Clear">全不选</button><button id="Other">反选</button></form></body></html>

下面的是全选和全不选一起的，即点击一次全选，再点击就全不选或反选！

代码比较简洁，建议使用这个

<script language="javascript">
function selsc()
{
for (var i=0;i<document.form1.did.length;i++) {
var temp=document.form1.did[i];
temp.checked=!temp.checked;
}
}
</script>

did为checkbox的name值，你可以根据实际情况修改：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>全选、全不选代码例子 - asp之家</title><style>td{ font-size:12px; line-height:150％;}</style></head><body><script language="javascript">function selsc(){for (var i=0;i<document.form1.did.length;i++) {var temp=document.form1.did[i];temp.checked=!temp.checked;}}</script><table class="table"> <form id="ads" name="form1" method="post" action=""> <tr> <th>选择</th> <th>文章标题</th> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <span class="c_title"><a class="a_title" title="网站推广之友情链接的技巧" href="https://www.aspxhome.com/news/2008/3306.htm">网站推广之友情链接的技巧</a></span> </td> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <a class="a_title" title="关于H1的用法探讨" href="https://www.aspxhome.com/program/2008/3313.htm">关于H1的用法探讨</a></td> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <a class="a_title" title="IE8的一些CSS hack" href="https://www.aspxhome.com/program/2008/3301.htm">IE8的一些CSS hack</a> </td> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <a class="a_title" title="ASP长文章分页代码实例" href="https://www.aspxhome.com/program/2007/1837.htm">ASP长文章分页代码实例</a></td> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <a class="a_title" title="一个简单的北京2008奥运倒计时代码" href="https://www.aspxhome.com/program/2008/3287.htm">一个简单的北京2008奥运倒计时代码</a> </td> </tr> <tr> <td><input type="checkbox" name="did" value="checkbox" /></td> <td> <a class="a_title" title="js更好地截取字符串" href="https://www.aspxhome.com/program/2008/3268.htm">js更好地截取字符串</a> </td> </tr> <tr> <td colspan="2"><label> <input type="checkbox" name="abc" onclick="selsc()" value="checkbox" /> 全选</label>  <a href="http://www.aspxhome.com">asp之家</a></td> </tr> </form></table></body></html>

投稿

js全选/全不选/反选 checkbox代码

猜你喜欢