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

试试这样:

创建表单元素:

<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'复选框添加一个事件监听器，当每个复选框被切换时，它将禁用/启用提交按钮。

EDIT -一次只能激活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()以与其他函数相同的方式迭代每个表单元素(注意到这里的模式吗?)并禁用当前未选中的任何复选框。每次更改复选框并选中表单中的小于2时，changeHandler()调用next函数以确保复选框完全正常，并禁用提交按钮，以便表单无法提交:

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:这是小提琴，如果你想在野外看到它:

复选框比较疯狂

您使用的复选框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>