Question

我在php中使用ajax，jquery，mysql和checkbox进行了设计。就像那样：

有复选框。还有另一个空盒子。当您选中第一个框中的复选框时，有关该复选框的信息将显示在空框中。我做到了并且运作良好。但是当您点击另一个复选框时，有关您首次点击的信息会消失，并且仅显示当前选择。也就是说，我想在旧的选择上添加新的选择。当我取消选中复选框时，如何在第二个框中删除信息。谢谢。

这是HTML代码：

<div id="first_box"> 
  <label class='checkbox'>
     <input type='checkbox' id=1> 
         First checkbox
  </label>
  <label class='checkbox'>
     <input type='checkbox' id=2> 
         Second checkbox
  </label>
  <label class='checkbox'>
     <input type='checkbox' id=3> 
         Third checkbox
  </label>
</div>
<div id="second_box"> </div>

这是jquery代码：

$(document).ready(function() {

 $("#first_box input:checkbox").change(function() {

    if($(this).is(":checked")) { 

       $.post("/here/is/url", { strID:$(this).attr("id"), strState:"1" },
        function(data) {
         $("#second_box").html(data);
       });

  } else {
      $.ajax({
        url: 'here/is/url/',
        type: 'POST',
        data: { strID:$(this).attr("id"), strState:"0" }
      });
  }
 });    


});

这是ajax请求的php代码：

$strID    = $_POST['strID'];
$strState = $_POST['strState'];

    if ($strState) { //if checkbox is clicked

        //I fetch data about checkbox which is clicked
        $infos = $this->info_model->get_info_from_checkbox_id($strID);

        foreach ($infos as $info) {
            echo "<label class='checkbox'>
                <input type='checkbox'>".$info->information .
                "</label>"; 
        }
    } else {  // if it is unchecked

         // I do not know how to delete 

    }

Answer 1

我想在旧版本上添加新的选择。

您可以使用append()代替html()替换内容：

$("#second_box").append(data);

当我取消选中复选框时，如何删除第二个框中的信息。

您可以使用empty()删除所选元素的内容：

$("#second_box").empty();

Answer 2

或者，您可以在客户端执行更多操作。有关演示，请参阅here。

<div id="first_box"> 
  <label class='checkbox'>
    <input data-url="url1" data-id="1" type="checkbox"> First checkbox
  </label>

  <label class='checkbox'>
    <input data-url="url2" data-id="2" type="checkbox" > Second checkbox
  </label>

  <label class='checkbox'>
    <input data-url="url3" data-id="3" type="checkbox"> Third checkbox
  </label>

</div>

<div id="second_box"></div>

JavaScript的：

$(document).ready(function() {
    $("#first_box input:checkbox").change(function(e) {
        var $this = $(this);

        if (already_loaded()) {
            update_visibility();
        } else {
            load();
        }

        // END -- Functions

        function already_loaded() {
            return $this.data("loaded");
        }

        function is_loading() {
            return $this.data("loading");
        }

        function load() {
            if (!is_loading()) {
                $this.data("loading", true);
                var id = $this.data("id");
                $.post("url", { // or use $this.data("url") if you want individual URLs
                    strId: id
                }, function(data) {
                    $this.data("loaded", true);
                    $this.data("is_loading", false);
                    $("#second_box").append(data);
                    update_visibility();
                });
            }
        }

        function is_checked() {
            return $this.is(":checked");
        }

        function update_visibility() {
            var $info = $("#info-" + $this.data("id"));
            if (is_checked()) {
                $info.show();
            }
            else {
                $info.hide();
            }
        }
    });
    $("#first_box input:checkbox").data("loaded", false);
    $("#first_box input:checkbox").data("loading", false);
});

单击复选框时如何添加新内容？

2 个答案: