Question

我这里的复选框有不同的价格，每个都有不同的标题。当用户单击该复选框时，它将在总字段中查看价格。当用户现在单击保存按钮时，我现在想要将总数保存到数据库并将选中复选框的标题保存到类别。将保存到数据库的一行的标题必须用逗号（，）分隔。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <form action="" method="post">
        <input type="checkbox" name="checkbox1" value="₱20"> Red </br>
        <input type="checkbox" name="checkbox1" value="₱30"> Blue </br>
        <input type="checkbox" name="checkbox1" value="₱40"> Green </br>
        </br></br>
        Total: <input type="text" name="total" readonly>
        <input type="submit" name="save" value="SAVE">
    </form>
    <script type="text/javascript">
    $(function(){
        //bind the change event to the checkboxes
        $('input[name="checkbox1"]').change(function(){
            var total = 0;
            //get value from each selected ckeck box
            $('input[name="checkbox1"]:checked').each(function(){
                var tval = $(this).val();
                //remove ₱ sign from value
                //convert it to a flot
                //plus it to the total
                total += parseFloat(tval.replace("₱",""));                
            });
            //finally display the total with a ₱ sign
            $('input[name="total"]').val("₱ " + total);
        });
    });
    </script>
</body>
</html>

我不知道如何将复选框的标题保存到数据库的一行（CATEGORY）。总价格也必须保存在数据库的TOTAL字段中。

表名：产品

列：CATEGORY，TOTAL

保存在数据库中的示例数据：

类别：[红色，蓝色]

TOTAL：[50]

Answer 1

给他们不同的名字

<input type="checkbox" name="Red" value="₱20"> Red </br>
<input type="checkbox" name="Blue" value="₱30"> Blue </br>
<input type="checkbox" name="Green" value="₱40"> Green </br>

并稍微更改你的jquery：

//bind the change event to the checkboxes
$('input[name="checkbox"]').change(function(){..}

然后访问属性名称：

var name = $(this).attr("name");

DEMO

$(function(){
    var total = 0;
    var colors = "";
    $("input[type=checkbox]").change(function(e) {

        var selected_color = $('input[type=checkbox]:checked');
        colors = selected_color.map(function() {
            return $(this).attr("name");
        }).get().join(', ');
        //alert(colors);


         selected_color.each(function(){
           var tval = $(this).val();
           total += parseFloat(tval.replace("₱",""));                
        });
        //alert(total);
    });

    $( "form" ).submit(function( event ) {
        $.ajax({
          type: "POST",
          url: "your_script.php",
          data: { category:colors, total: total},
          success:  function(data) {
                  alert('success'); 
          }
        });
    });
});

<强> PHP

echo $_POST['categor'];
echo $_POST['total'];

至于插件提供这是直接的前进，你没有指定你使用的驱动程序，但你可以咨询@Ghost的mysqli答案

<强> DEMO

Answer 2

如果您需要颜色，则需要从绑定的复选框中获取下一个兄弟，然后您可以为颜色创建另一个隐藏的表单，因为您将复选框值设置为价格。粗略的例子：

<form action="" method="post">
    <input type="checkbox" name="checkbox1" value="20"> Red </br>
    <input type="checkbox" name="checkbox1" value="30"> Blue </br>
    <input type="checkbox" name="checkbox1" value="40"> Green </br>
    </br></br>
    <!-- hidden input colors -->
    <input type="hidden" name="colors" value="" />
    Total: <input type="text" name="total" readonly>
    <input type="submit" name="save" value="SAVE">
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    var colors = [];
    //bind the change event to the checkboxes
    $('input[name="checkbox1"]').change(function(){
        var total = 0;
        //get value from each selected ckeck box
        $('input[name="checkbox1"]:checked').each(function(){
            var tval = $(this).val();
            total += parseFloat(tval);
        });
        //finally display the total with a ₱ sign
        $('input[name="total"]').val("₱ " + total);

        // handle colors
        var color = $.trim($(this)[0].nextSibling.nodeValue); // get the name
        var i = colors.indexOf(color);
        if(i != -1) {
            colors.splice(i, 1); // remove if unchecked
        } else {
            colors.push(color); // push if checked
        }
        var temp = colors.join(', ');
        $('input[name="colors"]').val(temp);

    });

});
</script>

PHP：

<?php

$db = new mysqli('localhost', 'username', 'password', 'database');
$stmt = $db->prepare('INSERT INTO `PRODUCTS` (`CATEGORY`, `TOTAL`) VALUES (?, ?)');

if(isset($_POST['save'])) {
    $total = (int) str_replace('₱ ', '', $_POST['total']); // remove peso sign
    $colors = $_POST['colors'];
    $stmt->bind_param('si', $colors, $total);
    $stmt->execute();
}

?>

Answer 3

这对超级非凡的标签元素来说似乎是一个问题！（我太蠢了，我无法击败我的动力 - .-）

你可以把它放在这样的标签中：

红色

所以每个标签都标识每个复选框

所以你可以（如果它是PHP）：

$ labels = $ _POST ['labels'];

并假设你有一个像这样的规范化数据库（其他一切只用字符串）：

| ID | CATEGORY |

for（$ i = 0; $ i＆lt; count（$ labels）; $ i ++）{ mysqli_query（$ con，“插入CATEGORY（categoryname）值（'”+ $ labels [$ i]“'）;”）; }

PD：此代码未经过测试。

Answer 4

您需要编写一些服务器端代码来获取表单数据并将其写入数据库 - 这通常用PHP或ASP编写，并在SQL中将数据写入数据库。

如何将已选中复选框的值保存到数据库中

4 个答案: