javascript选择表中的所有复选框 [英] javascript select all checkboxes in a table
问题描述
我想制作一个网页，其中包含各个网页旁边的复选框。我希望用户能够选择多个网站，然后使用Google栏搜索网站。我有一张桌子，每个单元格都有一个填有复选框的表单。每个单元格都有一个checkall按钮，用于检查该单元格中的所有选项。我想添加一个复选框来选择页面上的所有选项。 （是的，我可以放弃这个选项，但我有点想知道如何访问单元格中的所有框，以便我可以像我想要的那样用谷歌搜索。）这里基本上就是我所拥有的。它是checkPage函数中的一部分，在这一点上需要帮助
< html>
< head>
< script type =text / javascript>
函数checkAll（checkname，bx）{
for（i = 0; i< checkname.length; i ++）{
checkname [i] .checked = bx.checked？真假;
function checkPage（bx）{
var bxs = document.getElementByTagName（table）.getElementsByTagName（link） ;
for（i = 0; i< bxs.length; i ++）{
bxs [i] .checked = bx.checked？真假;
}
}
< / script>
< / head>
< body>
< table border =1name =table>
< tr>
< td name =list00>
< form name =list00>
< input type =checkboxname =Check_ctrvalue =yesonClick =checkAll（document.list00.link，this）>< b>全部检查< / b>< DD>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< / form>
< / td>
< td><表格名称=list01>
< input type =checkboxname =Check_ctrvalue =yesonClick =checkAll（document.list01.link，this）>< b>全部检查< / b>< DD>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< / form>< / td>
< / tr>
< tr>
< td><表格名称=list10>
< input type =checkboxname =Check_ctrvalue =yesonClick =checkAll（document.list10.link，this）>< b>全部检查< / b>< DD>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< / form>< / td>
< td><表格名称=list11>
< input type =checkboxname =Check_ctrvalue =yesonClick =checkAll（document.list11.link，this）>< b>全部检查< / b>< DD>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< input type =checkboxname =linkvalue =something.com> something.com< dd>
< / form>< / td>
< / tr>
< / table>
< / body>
< / html>
function checkAllAll （bx）{
var cbs = document.getElementsByTagName（'input'）;
for（var i = 0; i< cbs.length; i ++）{
if（cbs [i] .type =='checkbox'）{
cbs [i] .checked = bx.checked;
$ b 这个函数是从您的复选框的onclick属性检查所有
< input type =复选框onclick =checkAll（this）> ;
编辑我误解了您的问题，我看到您尝试过在你的代码中。 getElement s ByTagName必须是复数形式，您可能在那里输入了错误，并且必须是上述答案中指定的标签。
编辑：将主复选框作为参数传递将允许按照vol7ron的建议切换检查/取消选中，并且已在此答案中进行了适当修改。
这个问题要求在页面上的所有复选框，所以这就足够了。
然而，控制哪些元素来寻找复选框可以通过多种方式来实现，太多了进行详细说明，但例子可以是document.getElementById（id）.getElementsByTagName，如果所有要控制的复选框都是来自一个元素的分支节点。
否则，您可以遍历另一个标签名称检索/定制类名称检索，仅举几例。
I want to make a page that has a table of various webpages with checkboxes next to each. I want the user to be able to select multiple sites then search the sites using a google bar. I have a table where each cell has a form filled with checkboxes. each cell has a checkall button that checks all the options in that cell. I would like to add a checkbox to select all the options on the page. (yes I could just leave this option out but I kind of want to know how to access all the boxes in the cells anyway so that I can search with google like I want.) here is basically what I have. Its the section inside checkPage function that needs help at this point
<html>
<head>
<script type="text/javascript">
function checkAll(checkname, bx) {
for (i = 0; i < checkname.length; i++){
checkname[i].checked = bx.checked? true:false;
}
}
function checkPage(bx){
var bxs = document.getElementByTagName ( "table" ).getElementsByTagName ( "link" );
for(i = 0; i < bxs.length; i++){
bxs[i].checked = bx.checked? true:false;
}
}
</script>
</head>
<body>
<input type="checkbox" name="pageCheck" value="yes" onClick="checkPage(this)"><b>Check Page</b>
<table border="1" name ="table">
<tr>
<td name ="list00">
<form name ="list00">
<input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list00.link, this)"><b>Check All</b><dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
</form>
</td>
<td><form name ="list01">
<input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list01.link, this)"><b>Check All</b><dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
</form></td>
</tr>
<tr>
<td><form name ="list10">
<input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list10.link, this)"><b>Check All</b><dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
</form></td>
<td><form name ="list11">
<input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list11.link, this)"><b>Check All</b><dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
<input type="checkbox" name="link" value="something.com">something.com<dd>
</form></td>
</tr>
</table>
</body>
</html>
解决方案 function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
Have that function be called from the onclick attribute of your checkbox to check all
<input type="checkbox" onclick="checkAll(this)">
Edit I misread your question a little, i see you have attempted it in your code. the getElementsByTagName has to be plural which you may have typo'd there and has to be a tag as specified by the answer above
Edit: Passing the master checkbox as a parameter would allow for toggling check/uncheck as suggested by vol7ron and has been modified in this answer appropriately.
The question asks for all checkboxes on the page so this would suffice.
However, providing control of which elements to look for checkboxes can be achieved in may ways, too many to go into detail but examples could be document.getElementById(id).getElementsByTagName if all checkboxes to be controlled are branched nodes from one element.
Otherwise, you can iterate through a further tag name retrieval / custom class name retrieval to name a few.
这篇关于javascript选择表中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
