Javascript HTML 表单中复选框的数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6412319/
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
Array for Checkboxes in HTML Forms
提问by Nyxynyx
I have a question regarding checkboxes.
我有一个关于复选框的问题。
<form method="post">
I speak the following languages:
<input type="checkbox" name="lang[]" value="en">English<br />
<input type="checkbox" name="lang[]" value="fr">Fran?ais<br />
<input type="checkbox" name="lang[]" value="es">Espa?ol<br />
</form>
Is it necessary to name the checkboxes lang[] (using an array) or can I give each checkbox a seperate name, like:
是否有必要将复选框命名为 lang[]（使用数组），或者我可以给每个复选框一个单独的名称，例如：
<form method="post">
I speak the following languages:
<input type="checkbox" name="lang_en" value="en">English<br />
<input type="checkbox" name="lang_fr" value="fr">Fran?ais<br />
<input type="checkbox" name="lang_es" value="es">Espa?ol<br />
</form>
Question 1I believe both works, if so when do you decide which to use?
问题 1我相信这两种方法都有效，如果可以，你什么时候决定使用哪个？
Question 2I am using the second method listed above so I can use PHP to detect which of the checkbox is selection by using a code similar to if(isset($_POST['lang_en'])). If I were to use the first method, is there a quick way to check if a particular checkbox is selected? At the moment the untested solution I can think of involves doing a if(in_array('lang_en', $_POST['lang']))to check if it exist in $_POST.
问题 2我正在使用上面列出的第二种方法，因此我可以使用 PHP 通过使用类似于if(isset($_POST['lang_en'])). 如果我使用第一种方法，是否有一种快速的方法来检查是否选中了特定的复选框？目前，我能想到的未经测试的解决方案涉及if(in_array('lang_en', $_POST['lang']))检查它是否存在于 $_POST 中。
Question 3The main question is this: I am using the second method so I can easily check if a checkbox is selected in PHP. Now I want to add a text link which when clicked will select all the checkboxes. My Javascript is not too good, so I am using a script from http://www.shiningstar.net/articles/articles/javascript/checkboxes.aspbut the example script uses an array for the checkbox's names while my PHP code cannot check if the checkboxes are selected with arrays are used for the checkbox's names. How can the javascript code be modified to work without arrays?
问题 3主要问题是：我正在使用第二种方法，因此我可以轻松检查是否在 PHP 中选中了复选框。现在我想添加一个文本链接，单击该链接将选择所有复选框。我的 Javascript 不太好，所以我使用了来自http://www.shiningstar.net/articles/articles/javascript/checkboxes.asp的脚本，但示例脚本使用了一个数组作为复选框的名称，而我的 PHP 代码无法检查如果复选框被选中，数组用于复选框的名称。如何修改 javascript 代码以在没有数组的情况下工作？
Hope I can get this annoying question figured out! Thanks!
希望我能解决这个烦人的问题！谢谢！
EDIT
编辑
Javascript:
Javascript：
<!-- Begin
function checkAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = true ;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
// End -->
</script>
HTML:
HTML：
<form action="http://localhost/website/places/search" method="post" accept-charset="utf-8" name="subcategory">
<ul>
<li><input type="checkbox" name="cuisine_American" value="American" /> American</li>
<li><input type="checkbox" name="cuisine_Chinese" value="Chinese" onClick="checkAll(document.subcategory.cuisine)" /> Chinese</li>
<li><input type="checkbox" name="cuisine_Indian" value="Indian" onClick="checkAll(document.subcategory.cuisine)" /> Indian</li>
<li><input type="checkbox" name="cuisine_Japanese" value="Japanese" onClick="checkAll(document.subcategory.cuisine)" /> Japanese</li>
<li><input type="checkbox" name="cuisine_Korean" value="Korean" onClick="checkAll(document.subcategory.cuisine)" /> Korean</li>
<li><input type="checkbox" name="cuisine_Mexican" value="Mexican" onClick="checkAll(document.subcategory.cuisine)" /> Mexican</li>
<li><input type="checkbox" name="cuisine_Middle Eastern" value="Middle Eastern" onClick="checkAll(document.subcategory.cuisine)" /> Middle Eastern</li>
<li><input type="checkbox" name="cuisine_Pakistani" value="Pakistani" onClick="checkAll(document.subcategory.cuisine)" /> Pakistani</li>
<li><input type="checkbox" name="cuisine_Italian" value="Italian" onClick="checkAll(document.subcategory.cuisine)" /> Italian</li>
</ul>
</form>
采纳答案by AJ.
Answers:
答案：
- Either works...depends on whether you want explicit names or an array
- You can also use
array_key_exists() - Can you post the javascript code you are using into your question? I'll take a further look...
- 要么有效...取决于您想要显式名称还是数组
- 你也可以使用
array_key_exists() - 您可以将您正在使用的 javascript 代码发布到您的问题中吗？我再仔细看看...
UPDATE:
更新：
Here is a jQuery solution for implementing your onclick handlers:
这是用于实现 onclick 处理程序的 jQuery 解决方案：
function checkAll(field){
$(':checkbox[name^="cuisine_"]').each(function(index){
this.checked=true;
});
}
function uncheckAll(field){
$(':checkbox[name^="cuisine_"]').each(function(index){
this.checked=false;
});
}
Note that you really don't need to pass in field, unless you want to generalize this and pass in the string for the startswith pattern (e.g. cuisine_).
请注意，您确实不需要传入field，除非您想对此进行概括并传入startswith 模式的字符串（例如cuisine_）。
回答by Jarek Tkaczyk
1 . Both work, solution with lang[] is much more flexible. For example if you have really long form with a list of checkboxes in a few categories, eg. languages user speaks, countries he visited, cars he drove, and let's say each list consists of 10 elements, then hard coding every one of them is a pain in the ..., on PHP side you'd have to check every element manually, and with an array you can do this:
1 . 两者都有效，使用 lang[] 的解决方案更加灵活。例如，如果您的表单非常长，其中包含几个类别中的复选框列表，例如。用户说的语言，他去过的国家，他开过的车，假设每个列表由 10 个元素组成，然后对每个元素进行硬编码是一件痛苦的事情……，在 PHP 方面，您必须手动检查每个元素, 使用数组你可以这样做：
if (isset($_POST['lang'] && is_array($_POST['lang'])
{
// let's iterate thru the array
foreach ($_POST['lang'] as $lang)
{
// do some super-magic here
// in your example array elements would be $_POST['lang'] = array('en','fr','es')
}
}
2 . Like said above to check if any of the languages was selected check:
2 . 就像上面说的检查是否选择了任何语言检查：
if (in_array('en', $_POST['lang']))
3 . If you are going to use jQuery simply use this snippet:
3 . 如果您打算使用 jQuery，只需使用以下代码段：
// selector ATTRIBUTE*=VALUE find all tags wchich ATTRIBUTE string contains VALUE
$('input[name*=lang]').attr('checked', 'checked'); // check
$('input[name*=lang]').removeAttr('checked'); // uncheck
