Unable to Load Dependent on Multi-Select using PHP and jQuery - php

Question

I tried to load state list multiple selected country and it worked when i tried form here https://phppot.com/php/load-dependent-dropdown-on-multi-select-using-php-and-jquery/
i tried to make some little change by replacing <select> with <input type="checkbox">
but it doesn't load any state list and i get error in console
index.php:36 Uncaught TypeError: Cannot read property 'length' of null
at getState (index.php:36)
at HTMLInputElement.onchange (index.php:64)
getState # index.php:36
onchange # index.php:64
HERE IS WHAT I TRIED:
<div class="row">
<label>Country:</label><br />
<?php
foreach ($countryResult as $country) {
?>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="country[]" id="<?php echo $country["id"]; ?>" onChange="getState();" value="<?php echo $country["id"]; ?>">
<label class="form-check-label" for="<?php echo $country["id"]; ?>">
<?php echo $country["country_name"]; ?>
</label>
</div>
<?php
}
?>
</div>
<div class="row">
<label>State:</label>
<select name="state[]" id="state-list" class="demoInputBox" multiple size=5>
<option value="">Select State</option>
</select>
</div>
SCRIPT
function getState() {
var str = '';
var val = document.getElementById('country-list');
for (i = 0; i < val.length; i++) {
if (val[i].selected) {
str += val[i].value + ',';
}
}
var str = str.slice(0, str.length - 1);
$.ajax({
type: "GET",
url: "get_state.php",
data: 'country_id=' + str,
success: function (data) {
$("#state-list").html(data);
}
});
}
GET_STATE.PHP
<?php
require_once("DBController.php");
$db_handle = new DBController();
if(!empty($_GET['country_id'])) {
$coun_id = $_GET["country_id"];
$query ="SELECT * FROM states WHERE countryID IN ($coun_id)";
$results = $db_handle->runQuery($query);
?>
<option value="">Select State</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option>
<?php
}
}
?>
HOW DO I LOAD DATA WITH CHECKBOX INSTEAD OF <select>

Answer 1

try this maybe it helps you
<div class="row">
<label>Country:</label><br />
<?php
foreach ($countryResult as $country) {
?>
<div class="form-check">
<input class="form-check-input country-list" type="checkbox" name="country[]" onChange="getState();" value="<?php echo $country["id"]; ?>">
<label class="form-check-label" for="<?php echo $country["id"]; ?>">
<?php echo $country["country_name"]; ?>
</label>
</div>
<?php
}
?>
</div>
<div class="row">
<label>State:</label>
<select name="state[]" id="state-list" class="demoInputBox" multiple size=5>
<option value="">Select State</option>
</select>
</div>
Script
function getState() {
var str = '';
var val = document.getElementsByClassName('country-list');
for (i = 0; i < val.length; i++) {
if (val[i].checked) {
str += val[i].value + ',';
}
}
var str = str.slice(0, str.length - 1);
$.ajax({
type: "GET",
url: "get_state.php",
data: 'country_id=' + str,
success: function (data) {
$("#state-list").html(data);
}
});
}