Question

我想使用复选框删除多行。我使用了ajax，但我无法发送多个值。由于选中了两个复选框，因此变量chk仅发送一个患者ID 数据库代码：

<center>
<h1><u>Patient Details</u></h1>
<table border="1" style="font-family:Georgia;color:#800000;font-style:bold;">
<tr style="font-family:Georgia;color:green;font-style:bold;">
    <th>#</th>
    <th>Patient ID</th>
    <th>Patient Name</th>
    <th>DOB</th>
    <th>Gender</th>
    <th>Address</th>
    <th>Phone No.</th>
    <th>Medicare</th>
    <th>Doctor Associated</th>
 </tr>
 <form method="post" action="delete.php">
<?php
while($row=mysqli_fetch_array($result))
{
$r=$row['patientId'];
?>
<tr>
<td><input type='checkbox' name='checkbox[]' id="checkbox[]" value=<?php   echo $r; ?>></td>
<td><?php echo $row['patientId']; ?></td>
<td><?php echo $row['patientName']; ?></td>
<td><?php echo $row['DOB']; ?></td>
<td><?php echo $row['Gender']; ?></td>
<td><?php echo $row['Address']; ?></td>
<td><?php echo $row['Phone']; ?></td>
<td><?php echo $row['Medicare']; ?></td>
<td><?php echo $row['Doctor']; ?></td>
</tr>
<?php
}
?>
</table>
<table>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF"><input name="del" type="button" onClick='myFunction()' id="del" value="Delete"></td>
</tr>
</table>
    <span id="msg"></span>
        </form>

    <script language="javascript">
function myFunction() {
var xmlhttp;
if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest()
    }
    else
        {
            xmlhttp=new Activexobject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                               document.getElementById("msg").innerHTML=xmlhttp.responseText;

            }
    }
    xmlhttp.open("POST","delete.php",true)
    var chk=document.getElementById("checkbox[]").value;
    //alert("Hello"+chk);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("chk="+chk);

}
</script>
<?php

}

Answer 1

无法看到你的HTML我认为你可能会有轻微的错误。名称相同，但每个复选框的id都不同 - 因此您使用的选择器方法（getElementById）只返回1个元素 - 假定ID必须是唯一的，并且html被认为是有效的。

您可以使用getElementById或更好getElementsByTagName

而不是querySelectorAll使用

<!--
    The name of the checkbox within the group should not be unique but the id 
    should be. The javascript will return a comma separated string which should 
    be trivial to parse at the backend php script for give you a series of 
    ids for your delete.       
-->
<label><input type="checkbox" name="checkbox[]" value="1" id="cbg_0" checked>cb1</label>
<label><input type="checkbox" name="checkbox[]" value="2" id="cbg_1">cb2</label>
<label><input type="checkbox" name="checkbox[]" value="3" id="cbg_2" checked>cb3</label>
<label><input type="checkbox" name="checkbox[]" value="4" id="cbg_3">cb4</label>
<label><input type="checkbox" name="checkbox[]" value="5" id="cbg_4" checked>cb5</label>


<script language="javascript">

    function myFunction() {

        var xmlhttp=( window.XMLHttpRequest ) ? new window.XMLHttpRequest : new Activexobject("Microsoft.XMLHTTP");

        xmlhttp.onreadystatechange=function(){
            if( xmlhttp.readyState==4 && xmlhttp.status==200 ) {
                document.getElementById("msg").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open( "POST", "delete.php", true )
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        var col=document.querySelectorAll('input[type="checkbox"][name="checkbox[]"]'); 
       /* The name here should match the name of the checkboxes in the group */

        var tmp=[];
        for( var n in col ) if( n && col[n] && col[n].nodeType==1 && col[n].checked==true ) tmp.push( col[n].value );
        var chk=tmp.join(',');


        xmlhttp.send("chk=["+chk+"]");
    }
</script>

典型的复选框组可能如下所示： -

{{1}}

使用ajax

1 个答案: