【Javascript】複数のチェックボックスをチェックした際に、すべてをHTML上で表示したい。

HTMLと言うか、Javascriptの方の問題の様な気がするのですが、教えてください。
下記の様なUIを作成しております。

ユーザーが希望国をチェックすると、下に表示されると言う単純なUIです。
しかしながら、一番下に記載してあるFranceしか反応しません。
つまり、Afgnistan、England、Franceとチェックが入っていても、Franceしか表示されません。
一方、Franceにチェックが入っていないと、他の国にチェックが入っていても表示されません。("no"とだけ表示されます。）

この例では、下記の様に表示したいと思っております。
＝＝＝＝＝

Afgahanistan
no
England
France

=======

コードは下記になります。
恐らく、チェックボックスの個数を拾って、For文で回すとかなのでしょうが、どうしても上手くいきません。
教えて頂きたく。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>test</title>
  </head>
  <body>
	<h1>Test</h1>
	<p>Where do you want to go ???</p>
	<form action="/" method="POST" enctype="multipart/form-data">
		<div>
			<p>Select at least one(1) country.</p>
		</div>
		<br>
		<div>
			<label for="ck1">Afgahanistan：</label>
			<input type="checkbox" id="ck1" name="checkbox" value="Afgahanistan">
		</div>
		<div>
			<label for="ck2">Australia：</label>
			<input type="checkbox" id="ck2" name="checkbox" value="Australia">
		</div>
		<div>
			<label for="ck3">England：</label>
			<input type="checkbox" id="ck3" name="checkbox" value="England">
		</div>
		<div>
			<label for="ck4">France：</label>
			<input type="checkbox" id="ck4" name="checkbox" value="France">
		</div>		
	</form>


<p id="msg"></p>

<script>

function valueChange(){
  if (ck1.checked){
	msg.innerText='afganistan';
  }else{
	msg.innerText='no';
  } 
  if (ck2.checked){
	msg.innerText='Australia';
  }else{
	msg.innerText='no';
  } 
  if (ck3.checked){
	msg.innerText='England';
  }else{
	msg.innerText='no';
  }
  if (ck4.checked){
	msg.innerText='France';
  }else{
	msg.innerText='no';
  }
}


let ck1= document.getElementById('ck1');
ck1.addEventListener('change',valueChange);
let ck2= document.getElementById('ck2');
ck2.addEventListener('change',valueChange);
let ck3= document.getElementById('ck3');
ck3.addEventListener('change',valueChange);
let ck4= document.getElementById('ck4');
ck4.addEventListener('change',valueChange);

let msg = document.getElementById('msg');


</script>

</body>
  
	
</html>


コード

<後記＞　
Yambejp　さん、ありがとうございました。
一発で解決しました。
下記に最終コードを記載しておきます。
尚、チェックボックスで選択しない場合は、"no"ではなく、空白("")とする事にしました。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>test</title>
  </head>
  <body>
	<h1>Test</h1>
	<p>Where do you want to go ???</p>
	<form action="/" method="POST" enctype="multipart/form-data">
		<div>
			<p>Select at least one(1) country.</p>
		</div>
		<br>
		<div>
			<label for="ck1">Afgahanistan：</label>
			<input type="checkbox" id="ck1" name="checkbox" value="Afgahanistan">
		</div>
		<div>
			<label for="ck2">Australia：</label>
			<input type="checkbox" id="ck2" name="checkbox" value="Australia">
		</div>
		<div>
			<label for="ck3">England：</label>
			<input type="checkbox" id="ck3" name="checkbox" value="England">
		</div>
		<div>
			<label for="ck4">France：</label>
			<input type="checkbox" id="ck4" name="checkbox" value="France">
		</div>
		<div>
			<input type="submit" value="SEND">
		</div>
	</form>

<br>
<br>

<p> Your selected countries are belows.</p>
<p> ↓ ↓ ↓</p>
<p id="msg"></p>

<script>

function valueChange(){
  let res=[];
  res.push(ck1.checked?'afganistan':'');
  res.push(ck2.checked?'Australia':'');
  res.push(ck3.checked?'England':'');
  res.push(ck4.checked?'France':'');
  msg.innerHTML=res.join("<br>");
}

 let ck1= document.getElementById('ck1');
 ck1.addEventListener('change',valueChange);
 let ck2= document.getElementById('ck2');
 ck2.addEventListener('change',valueChange);
 let ck3= document.getElementById('ck3');
 ck3.addEventListener('change',valueChange);
 let ck4= document.getElementById('ck4');
 ck4.addEventListener('change',valueChange);

 let msg = document.getElementById('msg');


</script>

</body>
  
	
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1function valueChange(){
2  let res=[];
3  res.push(ck1.checked?'afganistan':'no');
4  res.push(ck2.checked?'Australia':'no');
5  res.push(ck3.checked?'England':'no');
6  res.push(ck4.checked?'France':'no');
7  msg.innerHTML=res.join("<br>");
8}