チェックボックスでチェックした値を確認する【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>
<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>
<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」・「キャンセル」で処理を分けることができます。
実際にしたかった処理は、チェックボックスでチェックされた値は削除処理するので、その前に確認ボックスを作りたかったので、上記の処理を作りました