<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォーム入力 チェックボックス</title>
<script>
function checkbox_reset(){
document.getElementById('output_hobbies1').innerHTML = '';
document.getElementById('output_hobbies2').innerHTML = '';
}
function checkbox_output(){
var hobbies1 = '';
var hobby_elements1 = '';
for(var i = 0; i < hobby_elements1.length; i++){
if(hobby_elements1[i].checked){
hobbies1 += hobby_elements1[i].value;
}
}
document.getElementById('output_hobbies1').innerHTML = 'formElementを用いてアクセス: ' + hobbies1;
var hobbies2 = '';
var hobby_elements2 = '';
for(var i = 0; i < hobby_elements2.length; i++){
if(hobby_elements2[i].checked){
hobbies2 += hobby_elements2[i].value;
}
}
document.getElementById('output_hobbies2').innerHTML = 'DOMを用いてアクセス: ' + hobbies2;
}
</script>
</head>
<body>
<h1>フォーム入力 チェックボックス</h1>
<form name="form_name">
<fieldset>
<legend>趣味</legend>
<input type="checkbox" name="hobby" value="読書" id="books"><label for="books">読書</label>
<input type="checkbox" name="hobby" value="音楽鑑賞" id="music"><label for="music">音楽鑑賞</label>
<input type="checkbox" name="hobby" value="映画鑑賞" id="movie"><label for="movie">映画鑑賞</label>
<input type="checkbox" name="hobby" value="ネット" id="internet"><label for="internet">ネット</label>
<input type="checkbox" name="hobby" value="買い物" id="shopping"><label for="shopping">買い物</label>
<input type="checkbox" name="hobby" value="ゲーム" id="game"><label for="game">ゲーム</label>
<input type="checkbox" name="hobby" value="スポーツ" id="sport"><label for="sport">スポーツ</label>
<input type="checkbox" name="hobby" value="その他" id="other"><label for="other">その他</label>
</fieldset>
<button type="button" onclick="checkbox_output()">決定</button><button type="reset" onclick="checkbox_reset()">リセット</button>
</form>
<div style="width:25em;padding:0.1em 1em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<p id="output_hobbies1"></p>
<p id="output_hobbies2"></p>
</div>
</body>
</html>