如何限制直接从MYSQL数据库和PHP创建的清单中的选择（*不通过在HTML中手动创建清单）

Question

到目前为止，我的代码从网站上的mysql表中输出数据作为清单，但是我无法设置可以检查的选项数量的限制，即如果我只希望5个复选框中的3个被选中，我该怎么做在PHP中？

注意：关于复选框限制的大多数答案都显示了一些示例，这些示例中已经用HTML手动创建了一个清单，然后使用Javascript对可以选中的框数进行了限制。 但是，我的代码中不是这种情况。 我的代码输出的清单不是使用HTML手动创建的，而是使用PHP从预设的MySQL数据库自动创建的（如下所示）。 在这种情况下，如何限制已选中的框？ 带有代码的解决方案/示例将不胜感激！

这是我的PHP代码：

<?php

    $username = "root";
    $password = "";
    $hostname = "localhost";

    $dbname = "major_degrees";
    $str='';

    // Create connection
    $conn = new mysqli($hostname, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    $sql = "SELECT degree_name FROM majors";
    $result = $conn->query($sql);

    $out = '';
    $cnt = 0;
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            $cnt++;
            $out .= '<input id="cb_' .$cnt. '" class="someclass" type="checkbox" />' .$row['degree_name']. '<br/>';
        }
        echo $out;
    } 
    $conn->close();


?>

Answer 1

如果不使用JavaScript，就无法控制用户在客户端所做的事情，因为它是控制客户端浏览器体验的编程语言。 PHP正在生成HTML服务器端，然后进行打印，但是用户在自己的端与服务器之间没有来回的动作。

您可以做的是通过PHP生成列表，然后使用JavaScript控制列表。 浏览器必须在PHP输出之后（或更正确地，在生成列表之后）读取浏览器，以使其正常工作。 您可以从PHP输出JavaScript，或者更好的方法是，使用JavaScript AJAX调用PHP列表，然后关联控制器。

Answer 2

就像@Shadouts所说的那样，您无法通过PHP控制复选框，需要Javascript。 要创建列表，请像在html标记内一样回显查询的输出。 在本示例中，我将不包括查询为复选框返回的内容，而是简单的增量数据。

<form action="some_file" method="">
    <div id="checkboxes">
    <?php
        for($i = 0; $i < 8; $i++) {
            echo "<input class='checkChange' type='checkbox' name='check' value='ch".($i+1)."'>check ".($i+1)."<br>";
        }
    ?>
    </div>

    <input type="submit" value="Submit">
</form>

这将创建8个简单的复选框（以您为例，每个复选框具有适当的值和文本。一种更好的方法是用AJAX填充复选框列表，但是由于您似乎不熟悉这些技术，因此我将尝试并使其尽可能简单。

因此，现在可以在浏览器中看到我们的复选框。 剩下的就是控制它们。 我们将使用jQuery来实现。

在某些脚本标签中，我们具有以下内容：

$('.checkChange').change(function() {
    var count = 0;

    $('#checkboxes input:checked').each(function() {
        count++;
    });

    if (count >= 3) {
        $('#checkboxes input:not(:checked)').each(function() {
            $(this).attr("disabled", true);
        });
    } else {
        $('#checkboxes input:not(:checked)').each(function() {
            $(this).removeAttr('disabled');
        });
    }
});

只是让您知道，像$('.checkChange')这样的东西就是jQuery Selectors。 这意味着我们通过类，id或其他方式选择一些html元素。 要按类别选择元素， . + className。 通过其ID # + ID选择元素。 让我们现在解码以上代码示例：

首先，每当单击复选框（或更准确地说是更改）时， .change函数就会被调用： $('.checkChange').change
$('#checkboxes input:checked').each ：对于每个已选中的复选框，我们将计数值加一。
如果用户已选中3个复选框，则禁用（ $(this).attr("disabled", true); ）所有未选中的（ $('#checkboxes input:not(:checked)').each ）复选框。
如果没有，请启用它们： $(this).removeAttr('disabled');

为了使您可以在html标记内使用PHP，文件必须为.php 。 因此，文件-例如checkbox.php-将如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkboxing</title>
</head>
<body>

<form action="action.php" method="post">
    <div id="checkboxes">
    <?php
        for($i = 0; $i < 8; $i++) {
            echo "<input class='checkChange' type='checkbox' name='check' value='ch".($i+1)."'>check ".($i+1)."<br>";
        }
    ?>
    </div>

    <input type="submit" value="Submit">
</form>

</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    $('.checkChange').change(function() {
        var count = 0;

        $('#checkboxes input:checked').each(function() {
            count++;
        });

        if (count >= 3) {
            $('#checkboxes input:not(:checked)').each(function() {
                $(this).attr("disabled", true);
            });
        } else {
            $('#checkboxes input:not(:checked)').each(function() {
                $(this).removeAttr('disabled');
            });
        }
    });
</script>
</html>

要查看我上面描述的确切功能，请查看我创建的这个小提琴。

如何限制直接从MYSQL数据库和PHP创建的清单中的选择（*不通过在HTML中手动创建清单）

问题描述

2 个解决方案

解决方案1
3 2016-05-29 00:29:09

解决方案2
1 已采纳 2016-05-29 01:42:59

如何限制直接从MYSQL数据库和PHP创建的清单中的选择（*不通过在HTML中手动创建清单）

问题描述

2 个解决方案

解决方案1 3 2016-05-29 00:29:09

解决方案2 1 已采纳 2016-05-29 01:42:59

解决方案1
3 2016-05-29 00:29:09

解决方案2
1 已采纳 2016-05-29 01:42:59