特定のラジオボタンをクリックしたときだけ、特定のラジオボタンの横のテキスト入力欄を表示、及び、有効化し、テキストを入力できるようにする。特定のラジオボタン以外をクリックしたときは、特定のラジオボタンの横のテキスト入力欄を非表示、及び、無効化し、テキストを入力できないようにする。
実装例
実装例の動作について
「その他」のラジオボタンを選択すると、「その他」のラジオボタンの横のテキスト入力欄を表示、及び、有効化し、テキストを入力できるようにする。
「その他」のラジオボタン以外を選択すると、「その他」のラジオボタンの横のテキスト入力欄を、非表示、及び、無効化し、テキストを入力できないようにするする。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeDisplay() {
if ( document.Form1["number"][3].checked ) {
document . Form1["inputNumber"] . disabled = false;
document . getElementById('input-number') . style . display = "inline";
} else {
document . Form1["inputNumber"] . disabled = true;
document . getElementById('input-number') . style . display = "none";
}
}
window.onload = changeDisplay;
// -->
</script>
<!--
function changeDisplay() {
if ( document.Form1["number"][3].checked ) {
document . Form1["inputNumber"] . disabled = false;
document . getElementById('input-number') . style . display = "inline";
} else {
document . Form1["inputNumber"] . disabled = true;
document . getElementById('input-number') . style . display = "none";
}
}
window.onload = changeDisplay;
// -->
</script>
HTML
<form name="Form1" method="post" action="#">
<p>パソコン所有台数</p>
<input type="radio" name="number" value="持っていない" id="radio-0" checked onClick="changeDisplay()"><label for="radio-0"> 持っていない</label>
<input type="radio" name="number" value="1台" id="radio-1" onClick="changeDisplay()"><label for="radio-1"> 1台</label>
<input type="radio" name="number" value="2台" id="radio-2" onClick="changeDisplay()"><label for="radio-2"> 2台</label>
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisplay()"><label for="radio-other"> その他</label>
<p id="input-number" style="display:none;"><input type="text" name="inputNumber" size="2">台</p>
</form>
<p>パソコン所有台数</p>
<input type="radio" name="number" value="持っていない" id="radio-0" checked onClick="changeDisplay()"><label for="radio-0"> 持っていない</label>
<input type="radio" name="number" value="1台" id="radio-1" onClick="changeDisplay()"><label for="radio-1"> 1台</label>
<input type="radio" name="number" value="2台" id="radio-2" onClick="changeDisplay()"><label for="radio-2"> 2台</label>
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisplay()"><label for="radio-other"> その他</label>
<p id="input-number" style="display:none;"><input type="text" name="inputNumber" size="2">台</p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function changeDisplay() {
if ( document.Form1["number"][3].checked ) { // 「その他」のラジオボタンをクリックしたとき
document . Form1["inputNumber"] . disabled = false; // 「その他」のラジオボタンの横のテキスト入力欄を有効化
document . getElementById('input-number') . style . display = "inline"; // 「その他」のラジオボタンの横のテキスト入力欄を表示
} else { // 「その他」のラジオボタン以外をクリックしたとき
document . Form1["inputNumber"] . disabled = true; // 「その他」のラジオボタンの横のテキスト入力欄を無効化
document . getElementById('input-number') . style . display = "none"; // 「その他」のラジオボタンの横のテキスト入力欄を非表示
}
}
window.onload = changeDisplay; // ページを表示したとき、changeDisplay() を呼び出す
// -->
</script>
<!--
function changeDisplay() {
if ( document.Form1["number"][3].checked ) { // 「その他」のラジオボタンをクリックしたとき
document . Form1["inputNumber"] . disabled = false; // 「その他」のラジオボタンの横のテキスト入力欄を有効化
document . getElementById('input-number') . style . display = "inline"; // 「その他」のラジオボタンの横のテキスト入力欄を表示
} else { // 「その他」のラジオボタン以外をクリックしたとき
document . Form1["inputNumber"] . disabled = true; // 「その他」のラジオボタンの横のテキスト入力欄を無効化
document . getElementById('input-number') . style . display = "none"; // 「その他」のラジオボタンの横のテキスト入力欄を非表示
}
}
window.onload = changeDisplay; // ページを表示したとき、changeDisplay() を呼び出す
// -->
</script>
HTML
onClick=""
<input type="radio" name="number" value="その他" id="radio-other" onClick="changeDisplay()"><label for="radio-other"> その他</label>
イベント属性である onClick="" で、「その他」のラジオボタンをクリックしたときに、JavaScript の changeDisplay() を呼び出す。
有効化
<p id="input-number" style="display:none;"><input type="text" name="inputNumber" size="2">台</p>
「その他」のラジオボタンをクリックしたとき、JavaScript で、この部分のテキスト入力欄を、表示する。