Javascript 如何在每个查询结果中添加复选框？

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

使用此代码，当选中其他复选框时，“提交”按钮被启用，但现在我希望将选中的复选框限制为2

我尝试过在这个函数中使用var=max，但是当选中复选框时，submit按钮被禁用

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

---

您正在为复选框使用ID，该复选框对于每个
html输入都必须是唯一的。因此，我们现在使用的不是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>


var checker=document.getElementsByClassName（'checkboxClass'）；
var usporedi=document.getElementById（'usporedi'）；
//未选中或选中时，运行该函数
checker.onchange=函数（）{
如果（选中此项）{
usporedi.disabled=false；
}否则{
usporedi.disabled=true；
}
}
尝试以下方法：

创建表单元素：

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

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

编辑-一次仅激活两个复选框

好的…冲杯咖啡，这需要一段时间

添加事件侦听器

当文档加载时，我们只想自动执行一件事——使用适当的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); } );
        }
    }
}

处理程序本身非常简单，但您会注意到它使用了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;
}

disableCheckboxes（）
以与其他函数相同的方式迭代每个表单元素（注意此处的模式？），并禁用当前未选中的任何复选框。每次更改一个复选框并且选中表单中少于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;
        }
    }
}

功能启用复选框（）
{
var form=document.getElementById（'myForm'），e；
对于（i=0，n=form.elements.length；i

现在，这是解决这个问题的一个相当冗长的方法——但我希望您能够理解生成您所寻找的解决方案所需的步骤。享受：）

附：这是小提琴，以防你想在野外看到它：

ID是唯一的，您需要使用类或找到另一种方法来标识每个单独的复选框。您测试过这个吗？我不这么认为……他需要迭代集合，这是“checker”，他关于使用className作为选择器的观点是有效的，但它会生成集合，而不是单个对象。不，这段代码不起作用，但是它可以通过一个小的编辑。你能给我一些限制选中复选框的建议吗，因为只有当选中两个复选框时，提交按钮才应该启用，而一个选中的复选框不应该启用提交按钮。上面的代码中有一些线索-你有什么想法吗？如果没有，给我几个小时，我看看会发生什么我可以争论…今天早上我需要开始工作。我尝试了一些在这个论坛上找到的代码，但是当我把它放在这个解决方案中时，它不起作用。编辑你的问题并发布你迄今为止尝试过的内容。我已经编辑了我的原始问题，并尝试了javascript中的var max，但我不知道为什么不起作用。
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;
}

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

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