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存根。请注意，NOTHING会更改表单元素的创建，如上所示。

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); } );
        }
    }
}

我们传递给this函数的changeHandler参数指的是分配给变量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我们现在正在使用class.Class可以重复。所以根据那个类我们现在正在改变按钮。

更改类似的代码

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>

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

2 个答案: