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

您好，我想知道是否可以编写一些jQuery来检查按钮点击是否选中某个复选框，并对PHP文件执行AJAX请求。

如果响应成功，则应将JSON值发布到我的主html页面上的“results”和“results2”div中

我尝试了下面的代码

<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>

一个

两个

三个

$（“#提交按钮”）。单击（函数（）{
event.preventDefault（）；
如果（$（'.check1'）。是（':checked'））{
$.ajax({
url:'PHP.PHP'，
键入：“POST”，
数据：json，
成功：功能（数据）{
$（“#结果”）.empty（）；
$（“#结果”）。追加（数据）；
控制台日志（数据）；
}
});
}
如果（$（'.check2'）。是（':checked'））{
$.ajax({
url:'PHP2.php'，
键入：“POST”，
数据：json，
成功：功能（数据）{
$（“#结果2”）.empty（）；
$（“#结果2”）。追加（数据）；
控制台日志（数据）；
}
});
}
});

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

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

---

提前感谢。

如果HTML中有错误，请在每个复选框中添加类

<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 />

试试看

一个

两个

三个

$（“#提交按钮”）。单击（函数（）{
//事件.预防违约（e）；
如果（$（'#check1'）。是（':checked'））{
$.ajax({
url:'PHP.PHP'，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
$（“#结果”）.empty（）；
$（“#结果”）。追加（数据）；
控制台日志（数据）；
}
});
}
如果（$（'#check2'）。是（':checked'））{
$.ajax({
url:'PHP2.php'，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
$（“#结果2”）.empty（）；
$（“#结果2”）。追加（数据）；
控制台日志（数据）；
}
});
}
});

我想你看起来像这样：

表格：

   <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>

一


二


三

脚本：

   <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>

（函数（$）{
$（'#test'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var$checkbox=$（this.find（'input[type=checkbox]'）；
$checkbox.每个（函数（e）{
如果（$（this）.is（':checked'））{
var$name=$（this.attr（“name”）；
交换机（$name）{
案例“检查1”：
//做一些AJAX操作
打破
案例“检查2”：
//做一些AJAX操作
打破
案例“检查3”：
//做一些AJAX操作
打破
}
}
});
返回false；
});
}（jQuery））；

更改

data:json

为

dataType:'json'

更改

复选框的名称

它应该是相同的，并将

类

应用到每个复选框，否则您无法获得它

$（'.check1'）。是（':checked'）

啊，@NarendraSisodia有效，我没有使用

类

，谢谢！事实上，即使没有选中复选框，也会返回ajax成功。将函数（）更改为函数（事件）{之后的第一行，这正是我想要的。谢谢！