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

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

或者，您可以在客户端做更多的事情。有关演示，请参阅 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);
});​

Answer 2

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

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

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

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

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

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