用js 实现一个checkbox同时能全选和取消的功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js 实现一个checkbox同时能全选和取消的功能相关的知识，希望对你有一定的参考价值。
我的代码选了一次后第二次就失效了：下面是我的代码
<th><input type="checkbox" id="checkAllbox" onclick="fnAllCheckbox()"/></th>
//全选/取消选择消息
function fnAllCheckbox()
var chk = document.getElementById("checkAllbox");
if(chk.checked)
$("input[name='commentIds']").attr("checked",true);
else
$("input[name='commentIds']").attr("checked",false);
求大师指教。。。。。。。。。。。
function DoCheck()
var ch=document.getElementsByName("choose");
if(document.getElementsByName("allChecked")[0].checked==true)
for(var i=0;i<ch.length;i++)
ch[i].checked=true;
else
for(var i=0;i<ch.length;i++)
ch[i].checked=false;
贴一个自己的代码供你参考：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function ()
function $(id)
return document.getElementById(id);
var inputArr = document.getElementById("myCBox").getElementsByTagName("input");
function sel(flag)
for(var i=0;i<inputArr.length;i++)
inputArr[i].checked = flag;
// 全选
$("selAll").onclick = function ()
sel(true);
// 取消选择
$("cancelSel").onclick=function ()
sel(false);
// 反选
$("invertSel").onclick = function ()
for(var i=0;i<inputArr.length;i++)
inputArr[i].checked = !inputArr[i].checked;
</script>
</head>
<body>
<button id="selAll">全选</button> <button id="cancelSel">取消全选</button> <button id="invertSel">反选</button>
<div id="myCBox">
<div> <input type="checkbox">测试1 </div>
<div> <input type="checkbox">测试2 </div>
<div> <input type="checkbox">测试3 </div>
<div> <input type="checkbox">测试4 </div>
<div> <input type="checkbox">测试5 </div>
<div> <input type="checkbox">测试6 </div>
</div>
</body>
</html>
运行效果：
你试试这样看行吗：
var chk = document.getElementById("checkAllbox");$("input[name='commentIds']").attr("checked",chk.checked);
不过这写的跟你的类似。。。
你贴出来的代码我简单测试了一下，没有问题啊，可以实现，问题应该不在这里，你贴一下页面中的代码看看。
参考技术B <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
0 <input type="checkbox" onchange="s(this)"><br>
1 <input type="checkbox"><br>
2 <input type="checkbox"><br>
3 <input type="checkbox"><br>
</body>
<script type="text/javascript">
function s (e)
t=document.getElementsByTagName('input');
if(e.checked)
for(x in t)
t[x].checked=true;
else
for(x in t)
t[x].checked=false;
</script>
</html>
没必要用jq
如果有必要 可以用 if(t[x].type="checkbox") 来判断input类型
JS如何实现对name是数组的复选框的全选和反选以及取消选择？ form内容如下：
<form method="post" id="form1" name="form1" action="" >
<label><input type='checkbox' name='ptpt[1]' value='a1' />a1</label>
<label><input type='checkbox' name='ptpt[3]' value='a3' />a3</label>
<label><input type='checkbox' name='ptpt[6]' value='a6' />a6</label>
<label><input type='checkbox' name='ptpt[9]' value='a9' />a9</label>
<input type="button" value="全选" onclick="">
<input type="button" value="反选" onclick="">
<input type="button" value="取消全选" onclick="">
</form>
我的程序语言，需要同时获取value和ptpt里面的值，所以不同于一般的复选框的全选反选（一般的复选框，name里无值），请JS高手帮忙，感谢
不好意思，我给出的input可能有点误会，让人觉得name里面的值和value有关联，其实是无关联的，重新写几个，另外之所以name写成name=ptpt[num]这样的形式，是因为程序语言PHP不支持不带[]的形式
<label><input type='checkbox' name='ptpt[1]' value='aaaa' />aaaa</label>
<label><input type='checkbox' name='ptpt[3]' value='bbbb' />bbbb</label>
<label><input type='checkbox' name='ptpt[6]' value='cccc' />cccc</label>
<label><input type='checkbox' name='ptpt[9]' value='dddd' />dddd</label>
我的理解就是你想获取多选框的值和他名字的值（不理解就是名字的字符串值还是所代表数组的值）。
你可以把多选框的名字都写成一样的，再给多选框多加一个属性，里面存储你想获得的ptpt值，像下面这样
<input type='checkbox' name='p' value='a1' ptpt='ptpt[1]'/>
<input type='checkbox' name='p' value='a2' ptpt='ptpt[2]'/>
这样在获得选中的多选框后直接取ptpt属性的值就可以拿到你想要的ptpt的值了。追问
你可能不太了解，PHP语言有个问题，如果input的name值一样的话，他只能获取最后一个选中项，不像ASP或者其他，能获取数组形式，这也
是我为什么把name写成ptpt[num]的形式，这样PHP才能获取。但网上的全选、反选Model不支持name="ptpt[num]'这样的格式
那就和普通的一样了啊。追问
我在程序语言里可以用数组的形式获取递交来的$POST_['ptpt']，然后可以分别获取键和值，这种name="ptpt[num]"的写法，HTML也是支持的，另外我这么写也是迫不得已，因为php仅支持这种写法，如果不加[]会导致PHP只能获取最后一个复选框的值
追答
a1
a3
a6
a9
function selectAll()
var ptpts=document.getElementsByTagName("input");
alert(ptpts.length);
for(var i=0;i
不过有个问题啊，这个是去所有checkbox。如果你页面还有其他checkbox，你需要自己再过滤一下。
很感谢你，这么认真的帮我解答问题。另外关于过滤，如何通过Input的class来过滤呢？我刚才试了下加了一个新的，然后if处变为if(ptpts[i].type =="checkbox" && ptpts[i].id!='test')这样是可以的，但ID有唯一的局限性，如何用class呢？谢谢
追答ptpts[i].className!='class1'
本回答被提问者采纳 参考技术C 取到form中所有checkbox的list，判断点击了那个按钮，如果全选就在for中给他们加上checked=true,以此类推，后面得功能都是这个样 参考技术D <script src="jquery-1.7.2.min.js"></script><script>
$(function()
var chks = $(':checkbox[name^="ptpt["]');
$(':button:eq(0)').click(function()
chks.attr('checked','checked');
)
$(':button:eq(1)').click(function()
chks.each(function()
if($(this).attr('checked')=='checked')
$(this).removeAttr('checked');
else
$(this).attr('checked','checked');
);
)
$(':button:eq(2)').click(function()
chks.removeAttr('checked');
)
)
</script>追问
亲，能有不用jquery的么，因为我这边禁止使用……谢了
追答window.onload = function()
var inputs = document.getElementsByTagName('input');
var cheks = [],buttons = [];
for(var i = 0 ; i < inputs.length ; i ++)
if(inputs[i].type=='checkbox')cheks.push(inputs[i]);
else if(inputs[i].type=='button')buttons.push(inputs[i]);
buttons[0].onclick = function()
for(var i = 0 ; i < cheks.length ; i ++)
cheks[i].checked = 'checked';
buttons[1].onclick = function()
for(var i = 0 ; i < cheks.length ; i ++)
if(cheks[i].checked == true) cheks[i].checked = false;
else cheks[i].checked = 'checked';
buttons[2].onclick = function()
for(var i = 0 ; i < cheks.length ; i ++)
cheks[i].checked = false;
for(i=0;i<document.form2.arcID.length;i++)
if(!document.form2.arcID[i].checked)
document.form2.arcID[i].checked=true;
function noSelAll()
for(i=0;i<document.form2.arcID.length;i++)
if(document.form2.arcID[i].checked)
document.form2.arcID[i].checked=false;
<inputname="arcID" type="checkbox" id="arcID" value="331" class="np" />111
<inputname="arcID" type="checkbox" id="arcID" value="332" class="np" />222
以上是关于用js 实现一个checkbox同时能全选和取消的功能的主要内容，如果未能解决你的问题，请参考以下文章
JS如何实现对name是数组的复选框的全选和反选以及取消选择