使用 AJAX、PHP 和 MYSQL 在另一个复选框中显示来自 html 表单复选框的多个值答案

【问题标题】：display multiple values from html form checkbox in another checkbox using AJAX, PHP and MYSQL使用 AJAX、PHP 和 MYSQL 在另一个复选框中显示来自 html 表单复选框的多个值
【发布时间】：2014-09-06 09:07:49
【问题描述】：

我必须根据检查的类别选择子类别。我坚持选择多个复选框并使用 ajax 显示其值。我想使用纯 ajax 而不是 jquery。我正在从数据库表中获取 1 个复选框的值，现在我需要根据用户检查的多个复选框，使用选择查询获取的值显示其他复选框。我有一个想法 foreach 循环将被使用，但无法理解如何以及在何处构建它..请帮助。感谢你。这是表格：

<?php
while($f1=mysql_fetch_row($res))  {
?>
<input type="checkbox" name="chkcat[]" id="chkcat" onChange="showUser(this.value)" value='<?php echo $f1[1]; ?>'>  <?php echo $f1[0]; ?>
<? } ?>
<div> id="txtHint"> </div>

具有 showUser 功能的 Ajax 代码

<script>
 function showUser(str) {
 if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
} 

if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_chkbox.php?q="+str,true);
xmlhttp.send();
}
</script>

并且必须根据所选类别和 url 获取子类别的文件，即：ajax_chkbox.php 是：

while($row = mysql_fetch_array($result)) 
{
echo "<input type=checkbox name=chksubcat[] id=chsubkcat value= $row[0]>  $row[2]"; 
echo "<br>";
}

【问题讨论】：

我给你的第一个建议是，分离出你的逻辑。 PHP 真的应该只做服务器端处理。 jQuery - DOM 操作。 KnockoutJS - UI 中的数据绑定。您可能会发现为应用程序的不同部分使用不同的库会更容易。更容易测试，更容易调试
嗯好吧，但我真的不知道..
"我想使用纯 ajax 而不是 jquery"??? Ajax 不是库
哦好的..我实际上搜索了一个答案，作为回报得到了很多 jquery 的东西..所以只是提到它作为我的要求 :)
我很难理解您要达到什么目的，您是否需要根据类别选择来填写 子类别？ checkbox 是那个类别吗？这意味着您可以选择多个项目，除非您正在寻找 radio input 为什么不能使用 jQuery？该库有一个有用的目的，可以让您免于很多麻烦。

标签： javascript php mysql ajax

【解决方案1】：

您可以将下拉菜单更改为复选框

select_cat.php

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".category").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "select_subcat.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subcat").html(html);
}
});

});

});
</script>

类别：

<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('databasefile');
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
$sql=mysql_query("select cat_name from category order by cat_name");
while($row=mysql_fetch_array($sql))
{
$cname=$row['cat_name'];
echo '<option value="'.$cname.'">'.$cname.'</option>';
} ?>
</select> <br/><br/>

SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>

2.select_subcat.php

<?php
include('databasefile);
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select s_name from subcat_l1 where cat_name='$id'");
while($row=mysql_fetch_array($sql))
{
$sname=$row['s_name'];
echo '<option value="'.$sname.'">'.$sname.'</option>';
}
}
?>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>

【讨论】：