使用全选选项创建复选框表答案

【问题标题】：create table of checkboxes with select all option使用全选选项创建复选框表
【发布时间】：2015-01-28 13:32:56
【问题描述】：

我正在创建一个复选框表，其中第一列将包含可以选中/取消选中当前行的复选框。

这是我目前的代码，但它不起作用。

<!DOCTYPE html>
<html>
<head>

    <script language="JavaScript">
        function toggle(source, $id) {
            checkboxes = document.getElementsByName($id);
            for (var i = 0, n = checkboxes.length; i < n; i++) {
                checkboxes[i].checked = source.checked;
            }
        }
    </script>

</head>

<body>

<?php
                    echo "<table>";
for ($x = 0; $x < 3; $x++) {
$id = $x;
echo "
<tr>";
    echo "
    <td>";
        echo '<input type="checkbox" onClick="toggle(this, $id)"/> Toggle All';
        echo '
    </td>
    ';
    for ($y = 0; $y < 7; $y++){
    echo "
    <td>";
        echo '<input type="checkbox" name=$id value="bar1"> Bar 1<br/>';
        echo '
    </td>
    ';
    }
    echo "
</tr>
";
}
echo "</table>";
?>

</body>
</html>

我知道代码可能包含多个错误，我正在尝试查找它们。同时，我将不胜感激任何建议。

【问题讨论】：

标签： php jquery checkbox

【解决方案1】：

试试这个代码

<!DOCTYPE html>
<html>
<head>
// your java script code for toggle is working only change is used id not $id.
<script language="JavaScript">
  function toggle(source, id) {
          checkboxes = document.getElementsByName(id);
          for(var i=0, n=checkboxes.length;i<n;i++) {
              checkboxes[i].checked = source.checked;
          }
  }
</script>
</head>

<body>
<?php
echo "<table>"; 
for ($x = 0; $x < 3; $x++) {
    $id = $x;
    echo "<tr>";
            echo "<td>";
            echo '<input type="checkbox" onClick="toggle(this, '.$id.')" /> Toggle All';
            // change here  onClick="toggle(this, $id)" to onClick="toggle(this, '.$id.')"
            echo '</td>';
            for ($y = 0; $y < 7; $y++){
                    echo "<td>";
                    echo '<input type="checkbox" name="'.$id.'" value="bar1"> Bar 1<br/>';
                    // also change the name=$id to name="'.$id.'"
                    echo '</td>';
            }
            echo "</tr>";
} 
echo "</table>"; 
?>
</body>
</html>

【讨论】：

谢谢，成功了。我犯了这样的语法错误是非常粗心的。我会尽快将您的答案标记为已接受。
@amygrimaldi 很高兴这有帮助

【解决方案2】：

我不确定您的 javascript，但它肯定需要我对其进行的更改。

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
    // change to-> Id from-> $id 
    function toggle(source, Id) {
        checkboxes = document.getElementsByName(Id);
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
</script>
</head>
<body>
    <table>
<?php
    for ($x = 0; $x < 3; $x++) {
        $id = $x; ?>
        <tr>
            <td>
                <!--$id won't work in single quotes like that so you have to break it out.
                See comment below, but you may need to base the toggle on the class-->
                <input type="checkbox" onClick="toggle(this, '<?php echo $id; ?>')" /> Toggle All
            </td><?php
            for ($y = 0; $y < 7; $y++){ ?>
            <td>
            <!-- You will likely need to array this name, because if the 
                 names are all the same, it will only take one value -->
            <input type="checkbox" name="<?php echo $id; ?>[]" class="sub-<?php echo $id; ?>" value="bar1"> Bar 1<br/>
            </td><?php } ?>
        </tr><?php
                } ?>
    </table>

【讨论】：