HTML 表单中的复选框数组

Posted 2023-02-22

【中文标题】HTML 表单中的复选框数组

【英文标题】：Array for Checkboxes in HTML Forms

【发布时间】：2011-09-18 17:33:55

【问题描述】：

我有一个关于复选框的问题。

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

是否需要为复选框命名 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>

问题 1我相信两者都可以，如果可以，您什么时候决定使用哪个？

问题 2 我正在使用上面列出的第二种方法，因此我可以使用 php 使用类似于 if(isset($_POST['lang_en'])) 的代码来检测选择了哪个复选框。如果我使用第一种方法，有没有一种快速的方法来检查是否选择了特定的复选框？目前，我能想到的未经测试的解决方案涉及执行if(in_array('lang_en', $_POST['lang'])) 以检查它是否存在于 $_POST 中。

问题 3 主要问题是：我使用的是第二种方法，因此我可以轻松检查是否在 PHP 中选中了复选框。现在我想添加一个文本链接，单击该链接将选中所有复选框。我的 javascript 不太好，所以我使用来自 http://www.shiningstar.net/articles/articles/javascript/checkboxes.asp 的脚本，但示例脚本使用数组作为复选框的名称，而我的 PHP 代码无法检查复选框是否被选中，数组用于复选框的名称。 如何修改 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：

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

【问题讨论】：

附加选项 - <input type='checkbox' name='lang[en]'/>。这就是我在需要动态复选框列表时使用的方法。当列表是静态的（即硬编码）时，我使用name='lang_en' 选项。而且我从不将value 属性与复选框一起使用。

哇，太酷了，我得试试这个，谢谢！

【参考方案1】：

答案：

任何一个都有效...取决于您想要显式名称还是数组 你也可以使用array_key_exists() 您能否将您正在使用的 javascript 代码发布到您的问题中？我再看看……

---

更新：

这是一个用于实现 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;
    );

请注意，您实际上不需要传入field，除非您想对此进行概括并传入startswith 模式的字符串（例如cuisine_）。

【讨论】：

你有兴趣在#3 中使用 jQuery 吗？我可以提出一个解决方案，该解决方案利用 jQuery 选择器来构建以“cuisine_”开头的所有复选框元素的数组。告诉我。

是的，那太好了！我很快就要使用 AJAX，所以我也必须学习 jQuery。

@Nyxynyx - 再次更新...花时间重新实现您实际的 onclick 处理程序。

【参考方案2】：

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 。如上所述检查是否选择了任何语言检查：

if (in_array('en', $_POST['lang']))

3 .如果你打算使用 jQuery，只需使用这个 sn-p：

// selector ATTRIBUTE*=VALUE find all tags wchich ATTRIBUTE string contains VALUE
$('input[name*=lang]').attr('checked', 'checked'); // check
$('input[name*=lang]').removeAttr('checked'); // uncheck