Question

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

到目前为止，这是我的代码，但是无效。

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

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

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

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

使用select all选项创建复选框表

2 个答案: