如何为每个查询结果添加复选框？

Question

我对这段代码有疑问。我在我的页面上列出了几个产品，每个产品都有一个来自查询的复选框。我想用“比较”按钮比较最多两个产品。因此，首先，我会“检查”这两种产品，然后单击“比较”按钮，然后将我重定向到另一个页面，在该页面上比较这两种产品。

在检查其他复选框时，使用此代码提交按钮将启用，但是现在我要限制检查的复选框至2。

我已经尝试使用此功能中的var = max尝试，但是当检查复选框时，请禁用提交按钮。

这可以在这个函数中完成，还是在新函数中完成？

    <?php
     
    $query = "SELECT * FROM artikli WHERE kategorija='laptop'";

    $result = mysqli_query($con, $query);
                    while ($row = mysqli_fetch_array($result)) {

                        $id = $row ['id'];

                        print
                                "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
                                "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
                                "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" .
                                "<pre id='pre1'>" . $row["opis"] . "</pre>" .
                                "</a><input type='checkbox' id='checkme_" . $id . "'/></div>";
                }
                ?>
            </form>


            <input type='submit' name='usporedi' disabled='disabled' id='usporedi' onclick="window.location.href='usporedi'" value='Usporedi'  />

            <script type="text/javascript">

                window.onload = function () {

                    var form = document.getElementById('Forma');
                    var usporedi = document.getElementById('usporedi');
                    var e;

                    for (i = 0, n = form.elements.length; i < n; i++)
                    {
                        e = form.elements[i];

                        if (e.type == 'checkbox')
                        {
                            if (e.id.indexOf('checkme') == 0)
                            {
                                e.addEventListener('change', function ()
                                {
                                    if (this.checked)
                                    {
                                        usporedi.disabled = false;
                                    } else {
                                        usporedi.disabled = true;
                                    }

                                });
                            }
                        }
                    }
                };
                


            </script>

Answer 1

试试这样的：

创建表单元素：

<form id="myForm">
<?php

$query = "SELECT * FROM artikli WHERE kategorija='laptop'";

$result = mysqli_query($con, $query);

while ($row = mysqli_fetch_array($result)) {

    $id = $row ['id'];

    print
        "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
        "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
        "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" .
        "<pre id='pre1'>" . $row["opis"] . "</pre>" .
        "</a>**<input type='checkbox' id='checkme_" . $id . "'/>**</div>
}
?>
</form>

请注意，我将您的开场 <form> 标记移至顶部并为其指定了一个 ID。我还通过将 _".$id." 添加到每个元素 id 来确保您的每个复选框都有一个唯一的 id。

现在是魔法：

<script type="text/javascript">

window.onload = function(){

    var form = document.getElementById('myForm');
    var usporedi = document.getElementById('usporedi');
    var e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];

        if( e.type == 'checkbox' )
        {
            if( e.id.indexOf('checkme') == 0 )
            {
                e.addEventListener( 'change', function()
                {
                    if( this.checked )
                    {
                        usporedi.disabled = false;
                    } else {
                        usporedi.disabled = true;
                    }

                } );
            }
        }
    }
}

</script>

这里的 javascript 会查看表单的所有元素，并且对于它找到的每个复选框，它会检查单词“checkme”是否出现在 id 的开头（我们不关心它的其余部分是什么在这种情况下）。然后它为每个“checkme”复选框添加一个事件监听器，当每个复选框被切换时，它将禁用/启用提交按钮。

编辑 - 一次只有 2 个复选框处于活动状态

好的……煮咖啡，这需要一段时间。

添加事件监听器

当文档加载时，我们只想自动做一件事 - 为表单中的每个复选框分配一个事件侦听器，并使用适当的 id 存根。请注意，在创建表单元素方面没有任何变化，如上所示。

window.onload = function(){

    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 )
        {
            e.addEventListener( 'change', function(){ changeHandler(this); } );
        }
    }
}

我们在这里传递给changeHandler 函数的this 参数是指分配给变量e 的复选框对象，因为我们在遍历表单元素时遇到它们。

声明事件处理程序

在我们的 window.onload 函数之外，我们需要声明我们的复选框 onChange 事件处理程序：

function changeHandler( elem )
{
    var usporedi = document.getElementById('usporedi');

    if( countChecked() == 2 )
    {
        disableCheckboxes();
        usporedi.disabled = false;
    }
    else
    {
        enableCheckboxes();
        usporedi.disabled = true;
    }
}

处理程序本身非常简单，但您会注意到它使用 3 个附加函数来完成其工作。 countChecked() 计算出当前选中了多少个复选框：

function countChecked()
{
    var form = document.getElementById('myForm'), e, c = 0;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];

        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 && e.checked == true )
        {
            c++;
        }
    }

    return c;
}

每次更改复选框时都会执行此功能。如果它返回值2 到changeHandler()，则调用下一个函数以确保不再检查，并从提交按钮中删除 disabled 属性。

function disableCheckboxes()
{
    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 && e.checked == false )
        {
            e.disabled = true;
        }
    }
}

disableCheckboxes() 以与其他函数相同的方式迭代每个表单元素（注意到这里的模式？）并禁用当前未选中的任何复选框。每次更改复选框并选中表单中的 LESS THAN 2 时，changeHandler() 会调用下一个函数以确保复选框功能齐全，并禁用提交按钮以使表单无法提交：

function enableCheckboxes()
{
    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 )
        {
            e.disabled = false;
        }
    }
}

现在，这是解决此问题的一种非常冗长的方法 - 但我希望您能够理解生成您正在寻找的解决方案所需的步骤。享受:)

PS：如果你想在野外看到它，这是小提琴：

Checkbox Comparison Madness

Answer 2

您使用的复选框 ID 对于每个 html input 必须是唯一的。因此，我们现在使用类而不是使用 ID。类可以重复。所以根据该类，我们现在正在更改按钮。

像这样修改代码

print
   "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
   "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
   "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" .
   "<pre id='pre1'>" . $row["opis"] . "</pre>" .
   "</a>**<input type='checkbox' id='checkme' class='checkboxClass'/>**</div>

和JS函数来

<script language='javascript'>
                        var checker = document.getElementsByClassName('checkboxClass');
                        var usporedi = document.getElementById('usporedi');
                        // when unchecked or checked, run the function
                        checker.onchange = function () {
                            if (this.checked) {
                                usporedi.disabled = false;
                            } else {
                                usporedi.disabled = true;
                            }

                        }
                    </script>