Question

尝试从MySQL查询中为动态创建的行创建臭名昭着的checkall复选框。行（以及复选框）的范围可以从1行到公制按钮。

表格（没有checkall）如下：

<form name="form" method="post" action = "process.order.php">

<?php
while($fetch = mysql_fetch_array($order_query){

$order_id = $fetch['oid'];
$order_status = $fetch['ostat'];

?>

   <input type="checkbox" name="order_row[<?=$order_id?>]" id="1" value="1">
   <select name="status[<?=$order_id?>]" id="status[<?=$order_id?>]"
   <option value="Ordered">Ordered</option>
   <option value="Backordered">Backordered</option>
   </select>
<? } ?>


<input type="submit" name="submit" id="submit" value="submit"> </form>

在process.order.php中：

<?php
if(is_array($order_row)){
foreach($order_row as $order_id=>$val){

...然后是脚本的其余部分。我试过用这个：How to implement "select all" check box in HTML? 还有这个： Select All Checkbox

我正试图避免在此刻使用jQuery。有没有办法可以将PHP脚本生成的复选框名称调用到javascript代码中？

更新我想使用一个可以跨多个页面调用的函数。因此，调用在JS中嵌入表单名称对我来说是不实际的。此外，我希望它是一个复选框 - 按钮的效果非常好，但我正在尝试保持用户界面简单，我已经有很多按钮，我试图摆脱...

Answer 1

Working Example

你可以这样做：

var frm = document.forms['form'];
for (var i = 0, l = frm.elements.length; i < l; i++) {
   if (frm.elements[i].type === 'checkbox') {
      frm.elements[i].checked = true;
   }
}

同样，要取消选中所有设置：

frm.elements[i].checked = true;

到false。

您还可以使用上面的代码轻松创建checkAll和unCheckAll函数。

顺便说一下，只有数字值的id无效，你应该使用alpha或混合使用字母和数字字符。

Answer 2

如果您不必支持IE6或7，则以下操作将起作用。

<强> Live Demo

var checkAll = document.getElementById("checkall");

checkAll.onclick = function(){
    [].forEach.call(
        document.forms['form'].querySelectorAll("input[type='checkbox']"),
        function(el){
            el.checked=true;
    });
}

使用数组选中所有复选框

2 个答案:

Working Example