formオブジェクトRadio／Checkbox
チェックボックスで選択したグループに入力制限をかける
checkboxの例
unknown
サンプルを見る<script type="text/javascript">
function fchk2(obj, name) {
var frm=obj.form;
if(obj.checked==true) {
/*
チェックボックスが選択されている場合は、
テキストボックスを有効化（false）
*/
for(var i=1; i<=3; i++){
frm.elements[name+i].disabled=false;
}
} else {
for(var i=1; i<=3; i++){
/* 無効化する前に、入力値をクリア */
if(name=='t'){
/* テキストボックスの場合 */
frm.elements[name+i].value="";
}else{
/* チェックボックスの場合 */
frm.elements[name+i].checked=false;
}
/* 無効化（true） */
frm.elements[name+i].disabled=true;
}
}
}
</script>
<form name="form2" action="#">
<label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br>
<input type="text" name="t1" value="テキストA" size="20" />
<input type="text" name="t2" value="テキストB" size="20" />
<input type="text" name="t3" value="テキストC" size="20" />
<hr />
<label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br>
<input type="checkbox" name="c1" value="1" />選択肢A<br>
<input type="checkbox" name="c2" value="1" />選択肢B<br>
<input type="checkbox" name="c3" value="1" />選択肢C
</form>
チェックボックスで選択したグループに入力制限をかける
radioの例
unknown
サンプルを見る<script type="text/javascript">
function fchk3(obj){
var frm=obj.form;
var len=frm.elements.length; /* フォームの要素数 */
if(obj.checked==true){
/*
チェックボックスが選択されている場合、
ラジオボタンを有効化（disabled=false）
*/
for(var i=0; i<len; i++){
if(frm.elements[i].type=="radio"){
frm.elements[i].disabled=false;
}
}
}else{
/*
チェックボックスが選択されていない場合、
ラジオボタンを無効化（disabled=true）
*/
for(var i=0; i<len; i++){
if(frm.elements[i].type=="radio"){
/* 無効化する前にラジオボタンを全て未選択状態にする */
frm.elements[i].checked=false;
/* 無効化 */
frm.elements[i].disabled=true;
}
}
}
}
</script>
<form name="form3" action="#">
<label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />ラジオボタンの無効化・有効化を切替（チェックを外すと無効化）</label><br>
<label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢A</label><br>
<label for="chk3_r2"><input type="radio" id="chk3_r2" name="r1" />選択肢B</label><br>
<label for="chk3_r3"><input type="radio" id="chk3_r3" name="r1" />選択肢C</label>
</form>
チェックボックスで選択したグループに入力制限をかける
プルダウンの例
unknown
サンプルを見る<script type="text/javascript">
function fchk4(obj) {
var frm=obj.form;
var len=frm.elements.length; /* フォームの要素数 */
if(obj.checked==true){
/* チェックボックスが選択されている場合、
プルダウンを有効化（disabled=false） */
frm.elements["sel"].disabled=false;
}else{
/* チェックボックスが選択されていない場合、
プルダウンを無効化（disabled=true） */
frm.elements["sel"].selectedIndex=0; /* プルダウン初期化 */
frm.elements["sel"].disabled=true;
}
}
</script>
<form name="form4" action="#">
<select name="sel">
<option value="0" selected="selected">▼選択してください</option>
<option value="1">選択肢A</option>
<option value="2">選択肢B</option>
<option value="3">選択肢C</option>
</select>
<label for="chk4"><input type="checkbox" id="chk4" name="chk4" onclick="fchk4(this)" checked="checked" />プルダウンの無効化・有効化を切替</label>
</form>
プルダウンで「その他」を選択時、テキストボックス（その他欄）を有効化
unknown
サンプルを見る<script type="text/javascript">
function fchk5(obj){
var frm=obj.form;
var len=obj.options.length; /* プルダウンの項目数 */
if(obj.selectedIndex==eval(len-1)){
/*
プルダウンで「その他」が選択された時、
その他入力欄を有効化
*/
frm.elements["sonota"].disabled=false;
alert("その他欄に入力してください");
}else{
/*
プルダウンで「その他」以外が選択された時、
その他入力欄をクリア＆無効化
*/
frm.elements["sonota"].value="";
frm.elements["sonota"].disabled=true;
}
}
</script>
<form name="form5" action="#">
<select name="sel" onchange="fchk5(this);">
<option value="0">選択してください</option>
<option value="1">選択肢A</option>
<option value="2">選択肢B</option>
<option value="3">選択肢C</option>
<option value="4">選択肢D</option>
<option value="5">その他</option>
</select>
その他欄 <input type="text" name="sonota" size="20" maxlength="256" disabled="disabled" />
</form>
ラジオボタンで選択された項目のみ、テキストボックスを有効化
unknown
サンプルを見る<script type="text/javascript">
function fchk6(elm){
var frm=document.form6;
if(elm!=6){
/* 「該当なし」以外のラジオボタンが選択されている場合 */
if(frm.elements[elm].checked==true){
for(var i=0; i<=4; i+=2){
if(i != elm){
frm.elements[eval(i+1)].disabled=true;
}
}
/* その列のテキストボックスを有効化 */
frm.elements[eval(elm+1)].disabled=false;
}
}else{
/*
「該当なし」が選択されている場合は、
テキストボックスをクリア＆無効化（disabled=true）
*/
for(var i=0; i<=4; i+=2){
frm.elements[eval(i+1)].value="";
frm.elements[eval(i+1)].disabled=true;
}
}
}
</script>
<form name="form6" action="#">
<ol>
<li><label for="r6_1"><input type="radio" id="r6_1" name="r6" value="1" onclick="fchk6(0)" />選択肢A</label> <input type="text" name="t1" disabled="disabled" /></li>
<li><label for="r6_2"><input type="radio" id="r6_2" name="r6" value="2" onclick="fchk6(2)" />選択肢B</label> <input type="text" name="t2" disabled="disabled" /></li>
<li><label for="r6_3"><input type="radio" id="r6_3" name="r6" value="3" onclick="fchk6(4)" />選択肢C</label> <input type="text" name="t3" disabled="disabled" /></li>
<li><label for="r6_4"><input type="radio" id="r6_4" name="r6" value="4" onclick="fchk6(6)" />該当なし</label></li>
</ol>
</form>
チェックボックスで選択された項目のみ、テキストボックスを有効化
unknown
サンプルを見る<script type="text/javascript">
function fchk7(obj, idx){
var frm=document.form7;
if(!obj.checked){
/* 入力値をクリア */
frm.elements["chk"+idx+"_txt"].value="";
/* チェックされたら、テキストボックスを有効化 */
frm.elements["chk"+idx+"_txt"].disabled=true;
}else{
/* チェックが外されたら、テキストボックスを無効化 */
frm.elements["chk"+idx+"_txt"].disabled=false;
}
}
</script>
<form name="form7" action="#">
<input type="checkbox" name="chk1" onclick="fchk7(this,1);" />
<input type="text" name="chk1_txt" disabled="disabled" /><br>
<input type="checkbox" name="chk2" onclick="fchk7(this,2);" />
<input type="text" name="chk2_txt" disabled="disabled" /><br>
<input type="checkbox" name="chk3" onclick="fchk7(this,3);" />
<input type="text" name="chk3_txt" disabled="disabled" />
</form>
チェックボックスを全選択／全解除
unknown
サンプルを見る<script type="text/javascript">
/* チェックボックスの名前で全選択/全解除処理する例 */
function chkAll_name(bool) {
var frm=document.form8_1;
for(var i=1; i<=3; i++) {
frm.elements["c8_1_"+i].checked=bool;
}
}
</script>
<form name="form8_1" action="#">
<p>
<input type="button" onclick="chkAll_name(true)" value="全選択" />
<input type="button" onclick="chkAll_name(false)" value="全解除" />
</p>
<p>
<label for="c8_1_1"><input type="checkbox" id="c8_1_1" name="c8_1_1" />選択肢A</label><br>
<label for="c8_1_2"><input type="checkbox" id="c8_1_2" name="c8_1_2" />選択肢B</label><br>
<label for="c8_1_3"><input type="checkbox" id="c8_1_3" name="c8_1_3" />選択肢C</label>
</p>
</form>
<hr />
<script type="text/javascript">
/* フォーム全体からチェックボックスだけ全選択/全解除処理をする例 */
function chkAll_form(bool) {
var frm=document.form8_2;
for(var i=0; i<frm.length; i++) {
if(frm.elements[i].type=="checkbox"){
frm.elements[i].checked=bool;
}
}
}
</script>
<form name="form8_2" action="#">
<p>
<input type="button" onclick="chkAll_form(true)" value="全選択" />
<input type="button" onclick="chkAll_form(false)" value="全解除" />
</p>
<p>
<label for="c8_2_1"><input id="c8_2_1" name="c8_2_1" type="checkbox" />選択肢A</label><br>
<label for="c8_2_2"><input id="c8_2_2" name="c8_2_2" type="checkbox" />選択肢B</label><br>
<label for="c8_2_3"><input id="c8_2_3" name="c8_2_3" type="checkbox" />選択肢C</label>
</p>
</form>
テキストボックスを入力不可にする
unknown
フォーカスを得た時にフォーカスを外すことで、入力不可にします。
readonlyを指定した時（<input type='text' readonly>）と同じ効果が得られます。
<!-- 入力しようとしてもフォーカスが外れて入力不可のテキストボックス -->
<form action="#">
<input type="text" onFocus="this.blur();" />
</form>
テキストボックスの背反処理
unknown
サンプルを見る<script type="text/javascript">
/* 該当なしにチェックしたら、他のチェックを消す */
function fchk10(elm){
var frm=document.form10;
if(elm==3){
for(var i=0; i<=2; i++){
frm.elements[i].checked=false;
}
}else{
frm.elements[3].checked=false;
}
}
</script>
<form name="form10" action="#">
<label for="c10_1"><input type="checkbox" id="c10_1" name="c10_1" value="1" onclick="fchk10(0)" />選択肢A</label><br>
<label for="c10_2"><input type="checkbox" id="c10_2" name="c10_2" value="1" onclick="fchk10(1)" />選択肢B</label><br>
<label for="c10_3"><input type="checkbox" id="c10_3" name="c10_3" value="1" onclick="fchk10(2)" />選択肢C</label><br>
<label for="c10_4"><input type="checkbox" id="c10_4" name="c10_4" value="1" onclick="fchk10(3)" />該当なし</label>
</form>