How to add new content when a checkbox is clicked? - php

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();

Answer 2

Alternatively, you could do more on the client-side. See here for a demo.
<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);
});​