JS如何实现对name是数组的复选框的全选和反选以及取消选择？ form内容如下：

Posted 2023-03-26

<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>

参考技术A 不明白你的意思。<input type='checkbox' name='ptpt[1]' value='a1' />
我的理解就是你想获取多选框的值和他名字的值（不理解就是名字的字符串值还是所代表数组的值）。
你可以把多选框的名字都写成一样的，再给多选框多加一个属性，里面存储你想获得的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]'这样的格式

参考技术B 复选框的name应该是相同的猜对，你也说了不同于一般的复选框。其实你的ptpt后面的数字和value里数字是对应的吧，那么你可以用相同的name，那个数字可以从value里得到啊。
那就和普通的一样了啊。追问

我在程序语言里可以用数组的形式获取递交来的$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;

第5个回答  2012-12-17 function selAll()

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

利用jQuery实现复选框的全选和反选

利用jQuery的is()过滤器来判断多个复选框是否处于选中状态，在利用prop()方法实现复选框的选中与未选中，请同学们根据下列代码，在实践中应用一下，以积累jQuery控制复选框的操作。

$("#selectall").click(function(){
           if($("input[name=check]").is(":checked")){
              $("input[name=check]").prop("checked",false);
           }else{
              $("input[name=check]").prop("checked",true);
           }
      });