jQuery 检查按钮点击时复选框是否被选中，然后对 PHP 执行多个 AJAX 请求

Question

嗨，我想知道是否可以写一些 jQuery 来检查按钮是否被点击，检查某个复选框是否被选中，然后执行 AJAX 请求 PHP 文件。

如果成功，响应应该 post JSON 值到 "results" 和 "results2" div 在我的 html 主页上。

我试过下面的代码

<form action="PHP.php" id="test" method="post">

<input type="checkbox" name="check1" value="1"/>one<br />
<input type="checkbox" name="check2" value="2"/>two<br />
<input type="checkbox" name="check3" value="3"/>three<br />

<input type="submit" id="submit_button" name="sub" value="Show"/>

</form>
        <script>

        $('#submit_button').click(function(){   
        event.preventDefault();         
            if ($('.check1').is(':checked')) {

            $.ajax({
                url: 'PHP.php',
                type: 'POST',
                data: json,
                success: function(data){

                    $("#results").empty();
                    $("#results").append(data); 


                    console.log(data);
                }

            });

            }

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

            $.ajax({
                url: 'PHP2.php',
                type: 'POST',
                data: json,
                success: function(data){

                    $("#results2").empty();
                    $("#results2").append(data); 


                    console.log(data);
                }

            });

            }

        });

        </script>

</div>

<div id="results">
</div>

<div id="results2">
</div>

注意：我正在加载的 PHP.php 和 PHP2.php 文件我目前只回显 JSON，直到我可以正常工作，但控制台没有记录任何数据。

我在让它工作时遇到了一些麻烦。我希望得到一些帮助，或者一些有关执行此操作的最佳方法的指导？

提前致谢。

Answer 1

您在 HTML 中有错误，请在每个复选框中添加 class

<input type="checkbox" class="check1" name="check1" value="1"/>one<br />
<input type="checkbox" class="check2" name="check2" value="2"/>two<br />
<input type="checkbox" class="check3" name="check3" value="3"/>three<br />

和 ajax 部分用单引号将 json 括起来：

dataType:'json'

Answer 2

试一试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form action="PHP.php" id="test" method="post">

<input type="checkbox" id="check1" value="1"/>one<br />
<input type="checkbox" id="check2" value="2"/>two<br />
<input type="checkbox" id="check3" value="3"/>three<br />

<input type="button" id="submit_button" name="sub" value="Show"/>

</form>
        <script>

        $('#submit_button').click(function(){   
        //event.preventDefault(e);         
            if ($('#check1').is(':checked')) {

            $.ajax({
                url: 'PHP.php',
                type: 'POST',
                dataType: "json",
                success: function(data){

                    $("#results").empty();
                    $("#results").append(data); 


                    console.log(data);
                }

            });

            }

            else if ($('#check2').is(':checked')) {

            $.ajax({
                url: 'PHP2.php',
                type: 'POST',
                dataType: "json",
                success: function(data){

                    $("#results2").empty();
                    $("#results2").append(data); 


                    console.log(data);
                }

            });

            }

        });

        </script>

</div>

<div id="results">
</div>

<div id="results2">
</div>

Answer 3

我觉得你看起来像这样：

形式:

   <form action="PHP.php" id="test" method="post">
        <input type="checkbox" name="check1" value="1" />one
        <br />
        <input type="checkbox" name="check2" value="2" />two
        <br />
        <input type="checkbox" name="check3" value="3" />three
        <br />
        <input type="submit" id="submit_button" name="sub" value="Show" />
      </form>

脚本：

  <script>
    (function($){
      $('#test').on('submit', function(e){
        e.preventDefault();
        var $checkbox = $(this).find('input[type=checkbox]');
        $checkbox.each(function(e){
          if($(this).is(':checked') ){
            var $name = $(this).attr("name");
            switch($name){
              case "check1": 
                // Do some AJAX operation
                break;
             case "check2": 
                // Do some AJAX operation
                break;
             case "check3": 
            // Do some AJAX operation
             break;
            }
          }
        });
        return false;
      });

    }(jQuery));
  </script>

jQuery 检查按钮点击时复选框是否被选中，然后对 PHP 执行多个 AJAX 请求

jQuery to check if checkbox is checked on button click, then do multiple AJAX requests to PHP

php

ajax

checkbox

jquery

json