• 締切済み

入力フォームの表示、非表示

ラジオボタンのオン、オフで入力フォームの表示、非表示ができ、入力フォームのラジオボタンのチェック有り無しの表示もできるようにできるjavascriptが知りたいです。

みんなの回答

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

>表示・非表示 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view2&f=2063&no=3 >チェックの有無 ele.checked 下は参考までに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>FORM Test</title> <script type="text/javascript"> //@cc_on function nextSiblingElement(n){ return n && (n = n.nextSibling) ? n.nodeType == 1 ? n : arguments.callee(n) : null; } var currentTarget = null; // for IE function switchNextElement(evt){ try{ var trigger = evt.target || evt.srcElement; var target = nextSiblingElement(evt.currentTarget || currentTarget); switch(trigger.value){ case 'SHOW' : target.style.display = 'block'; break; case 'HIDE' : target.style.display = 'none'; break; default : } }catch(exp){ throw exp; } } function getCheckedRadio(form){ try{ var inputs = form.getElementsByTagName('INPUT'); var checkedRadio = []; for(var i=0; i<inputs.length; ++i){ inputs[i].type == 'radio' && inputs[i].checked && checkedRadio.push(inputs[i].name); } return checkedRadio; }catch(exp){ throw exp; } } // 単品で調べるなら function getCheckedValue(a, i){ i=i||0; return a && a[i] ? a[i].checked ? a[i].value : arguments.callee(a, ++i) : null; } </script> </head> <body> <form action="#" onsubmit="alert(getCheckedRadio(this)); alert(getCheckedValue(this.elements['Q1']));"> <fieldset onclick="/*@ currentTarget = this; @*/ switchNextElement(event);"> <legend>フォーム表示切替</legend> <input type="radio" name="VISIBLE" value="SHOW" id="FORM.SHOW" checked><label for="FORM.SHOW">表示</label> <input type="radio" name="VISIBLE" value="HIDE" id="FORM.HIDE"><label for="FORM.HIDE">非表示</label> </fieldset> <fieldset> <fieldset> <legend>Q1</legend> <input type="radio" name="Q1" value="YES" id="Q1.YES" checked><label for="Q1.YES">YES</label> <input type="radio" name="Q1" value="NO" id="Q1.NO"><label for="Q1.NO">NO</label> </fieldset> <fieldset> <legend>Q2</legend> <input type="radio" name="Q2" value="YES" id="Q2.YES"><label for="Q2.YES">YES</label> <input type="radio" name="Q2" value="NO" id="Q2.NO"><label for="Q2.NO">NO</label> </fieldset> <input type="submit" value="送信"> </fieldset> </form> </body> </html>