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

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

    }

来源

2012-07-24 kalaba2003

我要添加旧的选择。

可以使用append()代替html()它取代了内容：

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

我怎样可以删除第二个框信息时，我未选中的复选框。

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

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

来源

2012-07-24 08:44:26 undefined

谢谢您的答复。事实上，没有必要写这个长码。答案很简单。这适用于添加旧的。 – kalaba2003 2012-07-24 08:48:10

@ kalaba2003欢迎您，不用担心，我已经复制/粘贴它们:)。 – undefined 2012-07-24 08:53:35

感谢您的关注。空（）工作，但它清空所有的框。我想删除只有哪个复选框被点击的信息。有什么办法吗？ – kalaba2003 2012-07-24 08:54:33

或者，你可以做更多的客户端。演示请参阅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); 
});

来源

2012-07-24 09:42:50 phant0m

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

回答

相关问题