How to call a function if the checkbox is checked and remove from the added list if it is not checked
This is what the stream looks like:
First I get the checkbox value and pass the value to the function to trigger the ajax. This ajax function returns a list of data in multiple groups in a select box. Each time the checkbox is checked, the value will be added to the selectbox. But I want to remove the value from the selectbox when the checkbox is unchecked.
Now when I click on the checkbox, the value is passed to the function regardless of whether I check or uncheck the checkbox. How to manage here?
first script
<script>
$("input[type=checkbox]").change(function() {
var selectedval = ($(this).val());
var selectedtext =($(this).next().text());
sendtobox(selectedval);
});
</script>
second script (function)
<script>
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
//alert("javascript version greater than 5!");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
// alert("you're using IE!");
}
catch(E)
{
xmlhttp = new XMLHttpRequest();
//alert("non IE!");
}
}
function sendtobox(param)
{
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var ajaxElm = document.getElementById('show');
ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
}
//document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+param,true);
xmlhttp.send();
}
</script>
Html
<input type="checkbox" name="level" id="level" class="level" value="1"><label>Primary</label><br/>
<input type="checkbox" name="level" id="level" class="level" value="2"><label>Upper Secondary</label><br/>
<input type="checkbox" name="level" id="level" class="level" value="3"><label>University</label><br/>
<input type="checkbox" name="level" id="level" class="level" value="4"><label>Lower Secondary</label><br/>
<input type="checkbox" name="level" id="level" class="level" value="5"><label>Pre University</label><br/>
<input type="checkbox" name="level" id="level" class="level" value="6"><label>Skills/Languages</label><br/>
getuser.php
<?php
$q= intval($_GET['q']);
$con = mysqli_connect('localhost','root','','wordblend_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"test_db");
//$sql="SELECT * FROM tbl_subjects WHERE level_id = '".$q."'";
$sql="SELECT * FROM tbl_levels,tbl_subjects WHERE tbl_levels.level_id=tbl_subjects.level_id AND tbl_levels.level_id='$q'";
$result = mysqli_query($con,$sql);
?>
<?php
while($row = mysqli_fetch_array($result)) {
$levels=$row['level_name'];
$subjects= $row['subject_name'];
$subjects_id= $row['subject_id'];
?>
<optgroup label="<?php echo $levels;?>">
<option value="<?php echo $subjects_id;?>"><?php echo $subjects;?></option>
</optgroup>
<?php
}
?>
source to share
In the onchange event, select the checkbox for the checked state of the checkbox and then take the appropriate action.
$("input[type=checkbox]").change(function() {
if($(this).is(":checked")) {
var selectedval = $(this).val();
var selectedtext = $(this).next().text();
sendtobox(selectedval);
}
else {
// remove the items
}
});
As far as removing items is concerned, you should keep track of what values are added for that particular checkbox. Only then can you delete those specific items.
EDIT based on comments
In your PHP code, add an ID for the items added in the checkbox. I add myself $q
which is the value of the checkbox as the class name.
<optgroup label="<?php echo $levels;?>" class="<?php echo $q;?>">
<option value="<?php echo $subjects_id;?>"><?php echo $subjects;?></option>
</optgroup>
Now in your jquery code:
$("input[type=checkbox]").change(function() {
var selectedval = $(this).val();
if($(this).is(":checked")) {
var selectedtext = $(this).next().text();
sendtobox(selectedval);
}
else {
$("optgroup."+selectedVal).remove();
}
});
This will now remove the option groups added by the ajax call.
source to share
Check the checked property of the checkbox.
$("input[type=checkbox]").change(function() {
var selectedval = ($(this).val());
var selectedtext =($(this).next().text());
if (this.checked) {
// do something else
} else {
sendtobox(selectedval);
}
});
Edit:
About deletion, I am assuming you want to undo the undo, which is what you do here:
ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML;
Instead of directly adding the response text, add it as a new dom element inside an element show
with some kind of unique ID, which you can later use to remove it. Something like this (I'm using jquery, since you seem to be using this in your first script too, you can all do this without it):
var ajaxElm = $('#show');
ajaxElm.append($('<span id="uniqueidgoeshere">').append(this.responseText))
And then when you remove it, refer to that id. The identifier must be inferred from the identifier (or other attributes) of the modified checkbox.
source to share