單擊複選框時如何添加新內容？

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

單擊複選框時如何添加新內容？

回答

相關問題