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

Posted 2023-02-24

【中文标题】单击复选框时如何添加新内容？

【英文标题】：How to add new content when a checkbox is clicked?

【发布时间】：2012-07-22 13:10:43

【问题描述】：

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

    

【参考方案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);
);​

【参考方案2】：

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

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

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

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

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

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

【讨论】：

感谢您的回复。事实上，没有必要写这么长的代码。答案很简单。这适用于添加旧的。

@kalaba2003 不客气，不用担心，我已经复制/粘贴了它们:)。

感谢您的关注。 empty() 有效，但它会清空所有框。我只想删除单击了哪个复选框的信息。有什么办法吗？

@kalaba2003 不客气，是的，有办法，这取决于标记和返回内容的结构。你可以使用 remove() 方法。

真的非常感谢。我处理了问题。