チェックボックスでチェックした値を確認する【JavaScript】

2019-11-292021-07-08

Contents

1. JavaScriptで、チェックボックスでチェックした項目の値をアラートダイアログに表示したい

JavaScriptで、チェックボックスでチェックした項目の値をアラートダイアログに表示したい

WEBページを作っていて、チェックボックスでチェックした値を取得して、そのチェックボックスの「Value」値を確認したいケースが有りました。POSTで送ってその後処理で確認画面を作っていいいですが、アラートのダイアログに表示したいと思い下記のコードを作りました

<html>

<script>
  function myfunc() {
    var elements = document.getElementsByName('chk[]') ;
    var arr = [];
    for(var i = 0 ; i < elements.length ; i ++){
      if(elements[i].checked == true){
        arr.push(elements[i].value);
      }
    }
	if(window.confirm('選択された値は「' + arr + '」です。処理を続けますか？')){
	  return true;
	}else{
	  return false;
	}

  }
</script>
<body>

<form action="./test.php" method="POST">
<input type="checkbox" name="chk[]" value="赤色"/>赤色<br/>
<input type="checkbox" name="chk[]" value="黄色"/>黄色<br/>
<input type="checkbox" name="chk[]" value="青色" checked/>青色<br/>
<input type="button" onclick="myfunc()"  value="送信"/>
</form>

</body>
</html>

チェックボックスで選択した内容が、アラートダイアログで表示され「OK」・「キャンセル」で分岐できるので、「OK」・「キャンセル」で処理を分けることができます。

実際にしたかった処理は、チェックボックスでチェックされた値は削除処理するので、その前に確認ボックスを作りたかったので、上記の処理を作りました