I want to display my checkbox values when I click, Whenever change checkbox, values update on a table view. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Values of Selected Checboxes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label for="checkbox1"> <input class="checkme" type="checkbox" value = "1111" id="checkbox1"> Checkbox 1</label><br>
<label for="checkbox2"> <input class="checkme" type="checkbox" value = "2222" id="checkbox2"> Checkbox 2</label><br>
<label for="checkbox3"> <input class="checkme" type="checkbox" value = "3333" id="checkbox3"> Checkbox 3</label><br>
<label for="checkbox4"> <input class="checkme" type="checkbox" value = "4444" id="checkbox4"> Checkbox 4</label><br>
<label for="checkbox5"> <input class="checkme" type="checkbox" value = "5555" id="checkbox5"> Checkbox 5</label><br>
<label for="checkbox6"> <input class="checkme" type="checkbox" value = "6666" id="checkbox6"> Checkbox 6</label><br>
<label for="checkbox7"> <input class="checkme" type="checkbox" value = "7777" id="checkbox7"> Checkbox 7</label><br>
<script>
$(document).on('change', '.checkme', function () {
var label = $(this).parent();
if ($(this).prop('checked')) {
var checkBox = document.getElementById("checkbox").value;
alert(checkBox);
} else {
alert(checkBox);
}
});
</script>
Select each checkbox value display as a table view. The result will appear on the same page.
The result like this:
----------------------------
Value
----------------------------
My Check Box Value is: 1111
My Check Box Value is: 2222
My Check Box Value is: 3333
My Check Box Value is: 4444
----------------------------
Aucun commentaire:
Enregistrer un commentaire