ラジオボタン
グループ内でチェックがオンになっているラジオボタンの番号を求めるサンプル。
引数はフォームの名前とラジオボタンの名前。
<![CDATA[
function checkRadio(frmName, elmName) {
var i;
for (i = 0; i < document[frmName][elmName].length; i++) {
if (document[frmName][elmName][i].checked) {
return i;
}
}
return undefined;
}
]]>
チェックボックス
選択されているチェックボックスの数を調べるサンプル。
<![CDATA[
function checkForm(obj) {
var i, count=0;
for(i=0; i<obj.chck.length; i++) { if( obj.chck[i].checked == true ) { // チェックされている場合 count++; } } if( count > 0 ) {
alert(count+"つチェックされています。");
}
else {
alert("チェックされていません。");
}
}
<form action="#">
<input name="chck" type="checkbox" id="check1" />チェック１<br />
<input name="chck" type="checkbox" id="check2" />チェック２<br />
<input name="chck" type="checkbox" id="check3" />チェック３<br />
<input name="chck" type="checkbox" id="check4" />チェック４<br />
<input type="button" value="確認" onclick="checkForm(this.form)" />
</form>
]]>
チェックボックスの全切り替え
チェックボックスのnameプロパティをすべて同じにしておき、それらのチェック状態を表すcheckedプロパティを一度にtrueまたはfalseに変化させます。
<![CDATA[
function allcheck(obj){
for(i=0; i<obj.pref.length; i++){ obj.pref[i].checked = true; } } function allclear(obj){ for(i=0; i<obj.pref.length; i++){ obj.pref[i].checked = false; } } <FORM action="#">
<INPUT type="checkbox" name="pref">東京
<INPUT type="checkbox" name="pref">神奈川
<INPUT type="checkbox" name="pref">千葉<BR>
(略)
<INPUT type="checkbox" name="pref">山梨<BR><BR>
<INPUT type="button" value="全選択" onClick="allcheck(this.form)">
<INPUT type="button" value="全クリア" onClick="allclear(this.form)">
</FORM>
]]>
チェックボックスによりボタンを表示
チェックボックスのON/OFFに従ってsubmitボタンの表示／非表示を切り替えます。
表示／非表示の切り替えにはstyleオブジェクトのvisibilityプロパティを使用。
ページがロードされた時の初期状態はCSSで設定。
<![CDATA[
<style type="text/css">
#submit { visibility: hidden; }
</style>
function check(obj){
if( obj.checked ){
document.getElementById("submit").style.visibility = "visible";
}
else {
document.getElementById("submit").style.visibility = "hidden";
}
}
<form method="post" action="">
<input type="checkbox" onclick="check(this)" />規約に同意する<br />
<input type="submit" id="submit" value="送信" />
</form>
]]>
チェックボックスによりaction切り替え
チェックボックスのチェック状態によってaction属性の値を切り替えます。
<![CDATA[
function check(obj){
if( obj.checked ){
obj.form.action = "agree.html";
}
else {
obj.form.action = "cancel.html";
}
}
<form action="cancel.html">
<input type="checkbox" onclick="check(this)" />規約に同意する<br />
<input type="submit" id="submit" value="送信" />
</form>
]]>
