Question

I made a design with ajax, jquery, mysql and checkbox in php. It is like that :

There is box with checkboxes. And there is another box which is empty. When you checked a checkbox in first box, information about that checkbox will be displayed in empty box. I did it and work good.But when you clicked another checkbox, information about first you clicked dissappear and only current selection is displayed. That is to say, I want to add new selection on old ones. Also how can I delete information in second box when I unchecked a checkbox. Thank you.

Here is HTML code :

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

Here is jquery code :

$(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" }
      });
  }
 });    


});  

Here is the php code for ajax request :

$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

I want to add new selection on old ones.

you can use append() instead of html() which replaces the content:

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

how can I delete information in second box when I unchecked a checkbox.

you can use empty() which removes the contents of the selected element:

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