Javascript 选中多个复选框并单击“提交”按钮_Javascript_Php_Ajax_Button_Checkbox

Javascript 选中多个复选框并单击“提交”按钮

javascript php ajax button checkbox

Javascript 选中多个复选框并单击“提交”按钮,javascript,php,ajax,button,checkbox,Javascript,Php,Ajax,Button,Checkbox,我刚刚使用ajax在多个复选框上完成了一个小项目。可以在此处找到演示：。但现在我想使用提交按钮作为过滤器选项。所以现在，在选中多个复选框并单击sumbit按钮后，手机数据库中应该只更改它。有什么帮助吗？谢谢这是我的密码： index.php <body> <h1>Phones database</h1> <table id="phones"> <thead> <tr>

我刚刚使用ajax在多个复选框上完成了一个小项目。可以在此处找到演示：。但现在我想使用提交按钮作为过滤器选项。所以现在，在选中多个复选框并单击sumbit按钮后，手机数据库中应该只更改它。有什么帮助吗？谢谢这是我的密码：

index.php

  <body> 
    <h1>Phones database</h1>

    <table id="phones">
      <thead>
        <tr>
          <th>ID</th>
          <th>Brand</th>
          <th>Model</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

    <div id="filter">
      <h2>Filter options</h2>
      <div>
        <input type="checkbox" id="Samsung" checked>
        <label for="Samsung">Samsung</label>
      </div>
      <div>
        <input type="checkbox" id="iPhone" checked>
        <label for="iPhone">iPhone</label>
      </div>
      <div>
        <input type="checkbox" id="HTC" checked>
        <label for="HTC">HTC</label>
      </div>
      <div>
        <input type="checkbox" id="LG" checked>
        <label for="LG">LG</label>
      </div>
      <div>
        <input type="checkbox" id="Nokia" checked>
        <label for="Nokia">Nokia</label>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script>
      function makeTable(data){
        console.log(data);
       var tbl_body = "";
          $.each(data, function() {
            var tbl_row = "";
            $.each(this, function(k , v) {
              tbl_row += "<td>"+v+"</td>";
            })
            tbl_body += "<tr>"+tbl_row+"</tr>";
          })

        return tbl_body;
      }

      function getPhoneFilterOptions(){
        var opts = [];
        $checkboxes.each(function(){
          if(this.checked){
            opts.push(this.id);
          }
        });

        return opts;
      }

      function updatePhones(opts){
        $.ajax({
          type: "POST",
          url: "submit.php",
          dataType : 'json',
          cache: false,
          data: {filterOpts: opts},
          success: function(records){
            $('#phones tbody').html(makeTable(records));
          }
        });
      }

      var $checkboxes = $("input:checkbox");
      $checkboxes.on("change", function(){
        var opts = getPhoneFilterOptions();
        updatePhones(opts);
      });

      $checkboxes.trigger("change");
    </script> 
  </body> 
</html>


电话数据库
身份证件
烙印
模型
价格
过滤器选项
三星
苹果手机
宏达电
LG
诺基亚
函数makeTable（数据）{
控制台日志（数据）；
var tbl_body=“”；
$.each（数据，函数（）{
var tbl_row=“”；
$。每个（此，函数（k，v）{
tbl_行+=“+v+”；
})
tbl_正文+=“”+tbl_行+“”；
})
返回tbl_体；
}
函数getPhoneFilterOptions（）{
var opts=[]；
$复选框。每个（函数（）{
如果（选中此项）{
选择推送（this.id）；
}
});
返回选项；
}
函数更新电话（opts）{
$.ajax({
类型：“POST”，
url:“submit.php”，
数据类型：“json”，
cache:false，
数据：{filterOpts:opts}，
成功：功能（记录）{
$（'#phones tbody'）.html（makeTable（records））；
}
});
}
var$复选框=$（“输入：复选框”）；
$checkbox.on（“更改”，函数（）{
var opts=getPhoneFilterOptions（）；
更新电话（opts）；
});
$checkbox.trigger（“变更”）；

submit.php

<?php 
require 'Database.php';
#### TEMP SET NAMES FÜR UTF8 ###################################################
include 'Json.php';
  $opts = $_POST['filterOpts'];
  $tmp = array();
  foreach ($opts as $opt) {
        $tmp[] = '"'.$opt.'"';
  }
        $query = 
      'SELECT mobile_phone.id, name, model, price FROM mobile_phone INNER JOIN brand ON brand_id = brand.id WHERE name IN ('.implode(",", $tmp).')';


  $result = mysql_query($query);
  $data   = array();
  while ($row = mysql_fetch_assoc($result)) {
  $data[] = $row;
  }

echo json_encode($data);
?>

在这里输入您的代码

var $checkboxes = $("input:checkbox");
          $checkboxes.on("change", function(){
            var opts = getPhoneFilterOptions();
            updatePhones(opts);
          });

删除此行UpdatePhone（opts）

在提交时调用此函数updatePhones（opts），并在函数updatePhones（opts）中修改以下内容

获取amount 1和amount 2并将其传递给submit.php文件

我们真的需要查看这个问题中的所有CSS吗？问题应该包括最少的代码来说明你的问题。因此，请不要只在这里转储您的项目并期望得到答案。“因此，现在在选中多个复选框并单击sumbit按钮后，手机数据库中应该只更改它。”什么是“它”？你能把这里的代码和标记的数量减少到与你的问题相关的程度吗？嗨，对不起，我已经减少了代码的数量。如果你选中演示，多个复选框会过滤电话数据库。但我现在想创建按钮，选中多个复选框并单击按钮后，只有电话数据库应该更新。嗨，巴拉特，我尝试过进行更改，但不起作用。你能告诉我在函数UpdatePhone（opts）中对下面的内容做了哪些修改吗anmd如何获取金额1和金额2并将其传递到submit.php文件？很抱歉回复太晚。你得到答案了吗？还是我应该试试？