如何使用ajax显示div中的所有复选框值

Question

我在MySQL表中显示了多个复选框。我尝试使用<div>将所有选中的值传递给ajax。目前，我的代码只将一个选中的值传递给<div>。我想在<div>中显示所有选中的值。

到目前为止我所拥有的：

 <?php
$sql="SELECT  * FROM options WHERE cat_id='".$id."' AND opg_id='".$group."'";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result)){ ?>

<input type="checkbox" name="<?php echo $row['op_id']; ?>" onClick="showPrice(this.name)" value="<?php echo $row['price']; ?>"/>

<!-- Display all prices from mysql table in checkbox. Pass `id` to ajax from name attribute. -->
<?php
} ?>

AJAX

<script>
function showPrice(name) {
 $.ajax({
        url: 'ajax_price.php',
        type: 'GET',
        data: {option : name},
        success: function(data) {
           document.getElementById('c').innerHTML =data;
        }
    });
}
</script>

ajax_price.php

<?php
include ("../supplier/DB/db.php");
$id = $_REQUEST['option'];

 <?php
$sql="SELECT  * FROM options WHERE op_id='".$id."'";

$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){

 ?> 
<div class="oder">
         <div class="odercol2"><?php echo $row['opt']; ?></div>
         <div class="odercol3"><?php echo $row['price']; ?></div>

    </div>
<?php
}
?>

这是<div>中只有一个选中值的显示。我想在<div>中显示所有选中的值。

复选框

结果显示在此div中（div id为＆＃34; c＆＃34;）

Answer 1

只需更改您的AJAX函数以连接DIV的innerHTML，如下所示：

<script>
function showPrice(name) {
 $.ajax({
        url: 'ajax_price.php',
        type: 'GET',
        data: {option : name},
        success: function(data) {
           document.getElementById('c').innerHTML += data;
        }
    });
}
</script>

注意这一行document.getElementById('c').innerHTML += data; 希望它有效。感谢

Answer 2

在复选框

中添加一个类值

<?php
$sql="SELECT  * FROM options WHERE cat_id='".$id."' AND opg_id='".$group."'";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result)){ ?>

<input type="checkbox" class="sundarCheckBox" name="<?php echo $row['op_id']; ?>" onClick="showPrice(this.name)" value="<?php echo $row['price']; ?>"/>

<!-- Display all prices from mysql table in checkbox. Pass `id` to ajax from name attribute. -->
<?php
} ?>

使用类名输入元素循环

<script>
$(document).ready(function(){

    function showPrice(value){

        $.each($('.sundarCheckBox'), function(index, element){

            if($(element).is(':checked')){

                alert($(element).prop('value'));
            }           
        });     
    }   
});
</script>