Javascript javascript选择表格中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7251005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript select all checkboxes in a table
提问by Bastiat
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
我想制作一个页面，其中包含一个包含各种网页的表格，每个网页旁边都有复选框。我希望用户能够选择多个站点，然后使用谷歌栏搜索这些站点。我有一个表格，其中每个单元格都有一个填充了复选框的表单。每个单元格都有一个 checkall 按钮，用于检查该单元格中的所有选项。我想添加一个复选框来选择页面上的所有选项。（是的，我可以忽略这个选项，但我有点想知道如何访问单元格中的所有框，以便我可以像我想要的那样用谷歌搜索。）这基本上就是我所拥有的。其 checkPage 函数内的部分此时需要帮助
<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>
回答by Psyrus
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
从复选框的 onclick 属性调用该函数以检查所有
<input type="checkbox" onclick="checkAll(this)">
EditI 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
编辑我有点误读了你的问题，我看到你已经在你的代码中尝试过了。getElement sByTagName 必须是复数，你可能在那里打错了，并且必须是上面答案指定的标签
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.
编辑：将主复选框作为参数传递将允许按照 vol7ron 的建议切换选中/取消选中，并已在此答案中进行了适当修改。
该问题要求页面上的所有复选框，所以这就足够了。
但是，可以通过多种方式来控制要查找复选框的元素，方法太多了，无法详细介绍，但如果要控制的所有复选框都是来自一个元素的分支节点，则示例可以是 document.getElementById(id).getElementsByTagName。
否则，您可以通过进一步的标签名称检索/自定义类名称检索进行迭代，仅举几例。
回答by vol7ron
Example: http://jsfiddle.net/vol7ron/kMBcW/
示例：http: //jsfiddle.net/vol7ron/kMBcW/
function checkPage(bx){
for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; )
for (var bxs=tbls[i].getElementsByTagName("input"), j=bxs.length; j--; )
if (bxs[j].type=="checkbox")
bxs[j].checked = bx.checked;
}
回答by grisevg
Have you tried jQuery? It's becoming javascript standart library for DOM manipulation (stackoverflow using in too).
你试过 jQuery 吗？它正在成为用于 DOM 操作的 javascript 标准库（stackoverflow 也使用 in）。
With it you could do $(':checkbox').prop('checked', true); to check every checkbox on the page(but you probably wan't to check then only in table).
有了它你可以做 $(':checkbox').prop('checked', true); 检查页面上的每个复选框（但您可能不想只在表格中检查）。
Well anyway start using jQuery, it will make your life easier and happier, and will save you a lot of time.
好吧，无论如何开始使用 jQuery，它会让你的生活更轻松、更快乐，并且会为你节省大量时间。
回答by Zrin
... or even simpler if you want to flip all checkboxes in the corresponding form:
...或者更简单，如果你想翻转相应表单中的所有复选框：
function checkAll(bx){
var form = bx.form;
var ischecked = bx.checked;
for (var i = 0; i < form.length; ++i) {
if (form[i].type == 'checkbox') {
form[i].checked = ischecked;
}
}
}
...
...
<input type="checkbox" onclick="checkAll(this)">
回答by Adam Marshall
tag name is the bit that starts the html tag eg <inputso the .getElementsByTagName ( "link" )should be .getElementsByTagName ( "input" )if you only want the name='link'then if(bxs.name =="link") { ... change the checked }
标签名称是开始 html 标签的位，例如<input，如果你只想要那么.getElementsByTagName ( "link" )应该是.getElementsByTagName ( "input" )name='link'if(bxs.name =="link") { ... change the checked }
