选中复选框时如何获取模式？答案

【问题标题】：How to get a modal when a checkbox is selected?选中复选框时如何获取模式？
【发布时间】：2016-10-27 07:16:58
【问题描述】：

这是我的代码

ex1.php

<body>

<form>

  <label>
    <input type="checkbox" value="LH" name="name">LH</label>
  <label>
    <input type="checkbox" value="LJ" name="name">LJ</label>
  <label>
    <input type="checkbox" value="LL" name="name">LL</label>
  <label>
    <input type="checkbox" value="FA" name="name">FA</label>
  <label>
    <input type="checkbox" value="FB" name="name">FB</label>
  <label>
    <input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <?php

        $test = $_POST['test'];

        $servername = "localhost";
        $username = "root";
        $password = "";


// Create connection
        $conn = mysqli_connect($servername, $username, $password);


// Check connection
        if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
        }
        echo "Connected successfully";

        mysqli_connect_db("db",$conn);

        $sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
        $res = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_assoc($res)){
        echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
        .$row['Subcat'];
        echo "<br>";   
}
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


</body>

ex1.js

$document.ready(function(){
    $(":checkbox").click(function(){
        var value_ck = $(this).val();
        $.ajax(
            url:"ex1.php",
            type:"post",
            data:{test:value_ck},
            success:function(){
                $("#myModal").modal();




                });
    });
});

我在这里要做的如下

我在表单中有一个复选框列表。当我单击一个复选框时，应该会出现一个模式，其中包含来自数据库的相应数据。我是Jquery 的初学者。我的代码不起作用。我到处都找到解决方案来解决这个问题。但我做不到。

有人可以帮帮我吗？

【问题讨论】：

使用$("INPUT[type=checkbox]") 而不是$(":checkbox")。还需要将modal放到单独的php文件中。
你可以通过两种方式做到这一点：) 1 ) 将模型打开类名称设置为复选框（意味着当你点击一个按钮或模型弹出的任何链接时弹出模型将打开所以取该值并放入复选框）2）在ajax成功触发点击功能
@NikolayKrasnov ，为什么我应该将模式放在单独的 php 文件中？你能解释一下吗？

标签： php jquery checkbox

【解决方案1】：

你可以使用

$('#myModal').modal('show')

使用 id myModal 和打开一个模型

$('#myModal').modal('hide')

隐藏模态

从发布请求加载数据后，使用 success:function() 中的值填充模型并使用 $('#myModal').modal('show') 向用户显示模型

【讨论】：

【解决方案2】：

如果您不熟悉 JSON/api 的东西，请这样做：

ex1.php

<body>

<form>

  <label>
    <input type="checkbox" value="LH" name="name">LH</label>
  <label>
    <input type="checkbox" value="LJ" name="name">LJ</label>
  <label>
    <input type="checkbox" value="LL" name="name">LL</label>
  <label>
    <input type="checkbox" value="FA" name="name">FA</label>
  <label>
    <input type="checkbox" value="FB" name="name">FB</label>
  <label>
    <input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>

modal.php

<?php

            $test = $_POST['test'];

            $servername = "localhost";
            $username = "root";
            $password = "";


    // Create connection
            $conn = mysqli_connect($servername, $username, $password);


    // Check connection
            if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
            }
            echo "Connected successfully";

            mysqli_connect_db("db",$conn);

            $sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
            $res = mysqli_query($conn,$sql);
            while($row = mysqli_fetch_assoc($res)){
            echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
            .$row['Subcat'];
            echo "<br>";   
    }
?>

ex1.js

$document.ready(function(){
    $("INPUT[type=checkbox]").click(function(){
        var value_ck = $(this).val();
        $.ajax(
            url:"modal.php",
            type:"post",
            data:{test:value_ck},
            success:function(modalBody){
                $("#myModal .modal-body").html(modalBody);
                $("#myModal").modal();
            });
    });
});

【讨论】：