<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォーム入力 ラジオ</title>
<script>
function radio_reset(){
document.getElementById('output_sex').innerHTML = '';
document.getElementById('output_party').innerHTML = '';
document.getElementById('output_election').innerHTML = '';
}
function radio_output(){
var sex = '';
var sex_elements = '';
for(var i = 0; i < sex_elements.length; i++){
if(sex_elements[i].checked){
sex = sex_elements[i].value + 'が選択されました';
break;
}else{
sex = 'どちらか選択してや！';
}
}
document.getElementById('output_sex').innerHTML = 'formElementを用いてアクセス: ' + sex;
var party = '';
var party_elements = '';
for(var i = 0; i < party_elements.length; i++){
if(party_elements[i].checked){
party = party_elements[i].value + 'が選択されました';
break;
}else{
party = 'どれか選択してや！';
}
}
document.getElementById('output_party').innerHTML = 'DOMを用いてアクセス: ' + party;
var election = '';
if(document.getElementById('go_election').checked){
election = document.getElementById('go_election').value + 'が選択されました';
}else if(document.getElementById('abstain').checked){
election = document.getElementById('abstain').value + 'が選択されました';
}else{
election = 'どちらか選択してや！';
}
document.getElementById('output_election').innerHTML = 'DOMを用いてアクセス: ' + election;
}
</script>
</head>
<body>
<h1>フォーム入力 ラジオ</h1>
<form name="form_name">
<fieldset>
<legend>政治アンケート</legend>
<ul>
<li>性別(nameで指定1):<input type="radio" name="sex" id="female" value="女"><label for="female">女</label>/<input type="radio" name="sex" id="male" value="男"><label for="male">男</label></li>
<li>支持政党(nameで指定2):<input type="radio" name="party" id="republican" value="共和党"><label for="republican">共和党</label>/<input type="radio" name="party" id="democrat" value="民主党"><label for="democrat">民主党</label>/<input type="radio" name="party" id="independents" value="支持政党なし"><label for="independents">支持政党なし</label></li>
<li>選挙に(idで指定):<input type="radio" name="election" id="go_election" value="行く"><label for="go_election">行く</label>/<input type="radio" name="election" id="abstain" value="棄権する"><label for="abstain">棄権する</label></li>
</ul>
</fieldset>
<button type="button" onclick="radio_output()">決定</button>
<button type="reset" onclick="radio_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_sex"></p>
<p id="output_party"></p>
<p id="output_election"></p>
</div>
</body>
</html>