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>