• ベストアンサー

javascript checkbox

完全に初心者です。。 下記のスクリプトをもとに、 ■チェックAをチェックしたら全てチェックされる ■またチェックAをチェックしたら全て外れる ようにしたいです。。 でも何がダメか分かりません。。 一部を書くのではなく出来ればスクリプト全ていただけたらと思います。 あともし宜しければチェックAをチェックしたら、１～６をチェックできないようにもしたいです。。 ご教授よろしくお願いします。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(){ for(i=1; i<7; i++){ document.form1.elements[ch[i]].checked = true; } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch" onclick="check()">チェックＡ</p> 　　<INPUT type="checkbox" id="ch1">チェック１ 　　<INPUT type="checkbox" id="ch2">チェック２ 　　<INPUT type="checkbox" id="ch3">チェック３<BR><BR> 　　<INPUT type="checkbox" id="ch4">チェック４ 　　<INPUT type="checkbox" id="ch5">チェック５ 　　<INPUT type="checkbox" id="ch6">チェック６<BR><BR> 　　<BR> </FORM> </BODY> </HTML>

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" onClick="allchk(this,1)">すべてを選択）</legend> <input type="checkbox" id="ch00"><label for="ch00">顔</label> <input type="checkbox" id="ch01"><label for="ch01">首筋</label> <input type="checkbox" id="ch02"><label for="ch02">胸元</label> <input type="checkbox" id="ch03"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04"><label for="ch04">太もも</label> <input type="checkbox" id="ch05"><label for="ch05">足首</label> </fieldset> <fieldset> <legend>すれ違いざまのアクション（<input type="checkbox" onClick="allchk(this,0)">すべてを選択）</legend> <input type="checkbox" id="ch10"><label for="ch10">触れる</label> <input type="checkbox" id="ch11"><label for="ch11">クドク</label> <input type="checkbox" id="ch12"><label for="ch12">ガン見</label> <input type="checkbox" id="ch13"><label for="ch13">ちら見くびれ</label> <input type="checkbox" id="ch14"><label for="ch14">無視</label> <input type="checkbox" id="ch15"><label for="ch15">後姿をまじまじと</label> </fieldset> <hr> <div> <p> <input type="checkbox" onClick="allchk(this,0)">すべてを選択 すべてのチェックさせるきっかけのタグは、&lt;p&gt;のようなタグで囲む。<br> そしてチェックさせたいものはすべて、その親の&lt;div&gt;で囲むことが条件。 </p> <input type="checkbox" id="ch20"><label for="ch20">触れる</label> <input type="checkbox" id="ch21"><label for="ch21">クドク</label> <input type="checkbox" id="ch22"><label for="ch22">ガン見</label> <input type="checkbox" id="ch23"><label for="ch23">ちら見くびれ</label> <input type="checkbox" id="ch24"><label for="ch24">無視</label> <input type="checkbox" id="ch25"><label for="ch25">後姿をまじまじと</label> </div> </form> <script type="text/javascript"> function allchk(element, flag){ var objs = element.parentNode.parentNode.getElementsByTagName('input'); var i=0,o,v; while( o=objs[i++] ) if( o.type == 'checkbox' && o != element ){ v = element.checked; o.checked = v; o.disabled = flag? v: false; } } </script>

ke---ta
質問者

お礼

本当にいろいろありがとうございました☆ 尊敬です！！ 俺もpipiさんみたいになれるように頑張ります♪♪

その他の回答 (7)

noname#84373
noname#84373
回答No.8

そして再考しました。cssを(class="xxx")を利用しています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" class="allcheck">すべてを選択）</legend> <input type="checkbox" id="ch00" class="chk"><label for="ch00">顔</label> <input type="checkbox" id="ch01" class="chk"><label for="ch01">首筋</label> <input type="checkbox" id="ch02" class="chk"><label for="ch02">胸元</label> <input type="checkbox" id="ch03" class="chk"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04" class="chk"><label for="ch04">太もも</label> <input type="checkbox" id="ch05" class="chk"><label for="ch05">足首</label> </fieldset> </form> <hr> <div> ※<input type="checkbox" class="allcheck">すべてを選択（ <input type="checkbox" id="ch10" class="chk"><label for="ch10">顔</label> <input type="checkbox" id="ch11" class="chk"><label for="ch11">首筋</label> <input type="checkbox" id="ch12" class="chk"><label for="ch12">胸元</label> <input type="checkbox" id="ch13" class="chk"><label for="ch13">腰のくびれ</label> <input type="checkbox" id="ch14" class="chk"><label for="ch14">太もも</label> <input type="checkbox" id="ch15" class="chk"><label for="ch15">足首</label> ） </div> <script type="text/javascript"> document.body./*@cc_on @if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var element = evt.target || evt.srcElement; var pnode = parentSearch( element, 'FIELDSET' ) || parentSearch( element, 'DIV' ); if(!pnode) return; var chkboxs = pnode.getElementsByTagName('input'); var i=0,o,t; if( element.className.match(/\ballcheck\b/) ) while( o=chkboxs[i++] ) if(o!=element) o.checked = element.checked; if( element.className.match(/\bchk\b/) ){ while( o=chkboxs[i++] ) if( o.className && o.className.match(/\ballcheck\b/) ) t=o.checked; if(t){ element.checked = t; alert('すべてを選択がチェックされているため変更できません'); } } }, false); function parentSearch(elementId, tagname){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; while( element.tagName != tagname ){ if(element.tagName == 'BODY') return false; element = element.parentNode; } return element; } </script>

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

この辺はまだ調べ方が足りませんが obj.from[n] は JS の性質を考えるとあまりしないほうがいいかもしれません。 obj.form.elements.item(n) elements は name でも、index でもどちらでもアクセスできる仕様になっているはずです。 それから、要素を無効にする手段ですが、return false などでデフォルト動作を切ってしまうより、 disabled でユーザーに対して使用不可であることを知らせたほうが良いと思います。 disabled は、チェック無効にするとともに値の送出も無効にする。それを考えると return false か、 理由がない限り、無効にしないほうがよいと思います。

noname#84373
noname#84373
回答No.6

ご指摘ありがとうございます。 でっ、自分なりに考えました。 不透明なオブジェクトをかぶせてみました！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" onClick="allchk(this,'ch')">すべてを選択）</legend> <div id="ch" > <input type="checkbox" id="ch00"><label for="ch00">顔</label> <input type="checkbox" id="ch01"><label for="ch01">首筋</label> <input type="checkbox" id="ch02"><label for="ch02">胸元</label> <input type="checkbox" id="ch03"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04"><label for="ch04">太もも</label> <input type="checkbox" id="ch05"><label for="ch05">足首</label> </div> </fieldset> </form> <script type="text/javascript"> function allchk(element, wrap){ var objs = element.parentNode.parentNode.getElementsByTagName('input'); var i=0,o,v; while( o=objs[i++] ) if( o.type == 'checkbox' && o != element ){ v = element.checked; o.checked = v; if( wrap && v){ if( !document.getElementById( wrap+'_wrap')) wrapping( wrap +'_wrap', wrap, '#fff', 50 ); else document.getElementById( wrap+'_wrap' ).style.display='block'; } else { document.getElementById( wrap+'_wrap' ).style.display='none'; } } } function wrapping( newId, elementId, backcolor, opacity ){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; var wrap = document.createElement('div'); if( opacity == undefined ) opacity = 50; if( backcolor == undefined ) backcolor = '#ffffff'; wrap.id = newId; with( wrap.style ){ position = 'absolute'; backgroundColor = backcolor; /*@cc_on @if(1) filter = 'alpha(opacity='+ opacity+ ')'; @else @*/ MozOpacity = (opacity / 100); opacity = (opacity / 100);/*@end@*/ var b = element.getBoundingClientRect(); top = b.top + 'px'; left = b.left + 'px'; width = element.offsetWidth + 'px'; height = element.offsetHeight + 'px'; } return element.appendChild( wrap ); } </script>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.5

いくつか・・・ Aをチェックして、disabledをいじるのはお勧めしません。 disabledになっている時点で、意味合いとしてはチェックしている こと自体が無効であると同意です。 Aをチェックするとその他のチェックが外れないようにするのを 希望するならdisableではなくonclickでfalseを返すという処理になります。 <script type="text/javascript"> function check(obj){ var f=obj.form; for(i=0; i<f.length; i++){ if(f[i].type=="checkbox" && f[i]!=obj){ f[i].checked= obj.checked; f[i].flg= !obj.checked; f[i].onclick=function(){return this.flg;} } } } </script> <form> <p> <input type="checkbox" id="ch" onclick="check(this)"><label for="ch">チェックＡ</label> </p> <p> <input type="checkbox" id="ch1"><label for="ch1">チェック１</label> <input type="checkbox" id="ch2"><label for="ch2">チェック２</label> <input type="checkbox" id="ch3"><label for="ch3">チェック３</label> </p> <p> <input type="checkbox" id="ch4"><label for="ch4">チェック４</label> <input type="checkbox" id="ch5"><label for="ch5">チェック５</label> <input type="checkbox" id="ch6"><label for="ch6">チェック６</label> </p> </form> ただし、Aをチェックをして、すべてをチェックをしたあと、 それぞれのチェックをかえられないというのは効率的ではありません。 普通は、一つ一つチェックするのが面倒なので、一気にチェックし あとは個別で外すってのが妥当なやり方でしょう。 ってことで#1の回答で十分かと。

noname#84373
noname#84373
回答No.4

そうそう ＞form1.elements[・・・] ってあったけど、おすすめできないかも！ さっきのやつなら、数も関係ないし

noname#84373
noname#84373
回答No.2

きっと書き忘れだと思うけど if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked= obj.checked; は、 if(f[i].type=="checkbox" && f[i]!=obj) f[i].disabled = f[i].checked= obj.checked; する予定だったと思うよ！

ke---ta
質問者

補足

yambejpさん、pipiさん本当にありがとうございます！！ 正直すごいです！！ 希望通りのご回答ありがとうございます！！ わがまま言って申し訳ないんですが、 教えていただいたのは、チェックできなくなるようになるものなんですが、 ただ、Aにチェックしたら１～６にチェックするだけのスクリプトはどんな感じになるんですか？？ 出来ましたら　form1.elements[・・・]　で作っていただけたらと思います。。本当にわがままですいません。。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

form1.elements[・・・]でやるならnameをつけてやるとよいでしょう まぁそれとは別にこんな感じでやると汎用性が高いかと。 <script type="text/javascript"> function check(obj){ var f=obj.form; for(i=0; i<f.length; i++){ if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked= obj.checked; } } </script> <form> <p> <input type="checkbox" id="ch" onclick="check(this)"><label for="ch">チェックＡ</label> </p> <p> <input type="checkbox" id="ch1"><label for="ch1">チェック１</label> <input type="checkbox" id="ch2"><label for="ch2">チェック２</label> <input type="checkbox" id="ch3"><label for="ch3">チェック３</label> </p> <p> <input type="checkbox" id="ch4"><label for="ch4">チェック４</label> <input type="checkbox" id="ch5"><label for="ch5">チェック５</label> <input type="checkbox" id="ch6"><label for="ch6">チェック６</label> </p> </form>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • checkbox ループ

    下記のスクリプトだと、 デバックが１６になってしまいます。 これをどうにかして、 ＡをチェックしたらＡ内だけをループ、 ＢをチェックしたらＢ内だけをループさせたいんですが、 どこをどのように修正すればいいですか？？ スクリプトをかなり変えるのは避けたいです。。 教えてください。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(n){ document.getElementById('debug').innerHTML = "デバッグ情報"; document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + "<br>lengthは" + document.form1.length; for(i=1; i<=document.form1.length; i++){ if(document.form1.elements["ch" + n].checked){ document.form1.elements["ch" + n + "-" + i].checked = true; document.form1.elements["ch" + n + "-" + i].disabled = true; }else{ document.form1.elements["ch" + n + "-" + i].checked = false; document.form1.elements["ch" + n + "-" + i].disabled = false; } } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch1" onclick="check(1)">チェックＡ</p> <INPUT type="checkbox" id="ch1-1">チェック１ <INPUT type="checkbox" id="ch1-2">チェック２ <INPUT type="checkbox" id="ch1-3">チェック３<BR><BR> <INPUT type="checkbox" id="ch1-4">チェック４ <INPUT type="checkbox" id="ch1-5">チェック５ <INPUT type="checkbox" id="ch1-6">チェック６<BR><BR> <BR> <p><INPUT type="checkbox" id="ch2" onclick="check(2)">チェックＢ</p> <INPUT type="checkbox" id="ch2-1">チェック１ <INPUT type="checkbox" id="ch2-2">チェック２ <INPUT type="checkbox" id="ch2-3">チェック３ <INPUT type="checkbox" id="ch2-4">チェック４<BR><BR> <INPUT type="checkbox" id="ch2-5">チェック５ <INPUT type="checkbox" id="ch2-6">チェック６ <INPUT type="checkbox" id="ch2-7">チェック７ <INPUT type="checkbox" id="ch2-8">チェック８<BR><BR> <BR> </FORM> <p id="debug"></p> </BODY> </HTML>

  • [javascript] checkboxによる合計の算出と表示について

    こんにちわ。 表記についてですが、javascriptによるcheckboxのvalue値を算出させようと悪戦苦闘しております・・・。 皆様のお知恵を拝借できればと思います。 至らない部分が多々あると思いますが下記に現在のソースを貼り付けますので、色々とご指摘いただければ幸いです。 （リアルタイム表示のためprototypeを使用しています。） <head><script src="prototype.js" type="text/javascript"></script> <script language="javascript"> function mprice(){ chn = 6; ttl = 0; for(i=0; i<chn; i++) { if(document.step2.elements[i].checked==true) { var pttl = ttl + eval(document.step2.elements[i].value); } else if(typeof(pttl) == "undefined") pttl = 0; } document.getElementById('pttlr').innerHTML = pttl + "円" } </script> </head> <body> <form name="step2"> <input type="checkbox" value="105" id="food" onClick="mprice()">コーラ<br /> <input type="checkbox" value="315" id="food" onClick="mprice()">肉<br /> <input type="checkbox" value="1050" id="book" onClick="mprice()">参考書<br /> <input type="checkbox" value="210" id="sweet" onClick="mprice()">飴<br /> <input type="checkbox" value="525" id="book" onClick="mprice()">マンガ<br /> <input type="checkbox" value="3150" id="music" onClick="mprice()">CD<br /> </form> <div id="pttlr">

  • JavaScript チェックボックスで指定の箇所をチェックする方法

    初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例：横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>

  • checkboxの選択数制限と排他処理について

    javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が５つの中から正しいものをチェックし送信するというものです。 その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 選択数に制限をかけることや排他処理（ラジオボタン）は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。 どうかよろしくお願い致します。 <html> <head> <script type="text/javascript"> function check(f,o,m){ var c = i = 0, b = f.elements; for (i; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o) c++; for (i = 0; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o) b[i-2].checked=false;// これだと２つ前ではなく2番目のチェックボックスが排他になります。 } </script> </head> <body> <form action="#" id="sampleform" onclick="check(this,'options',2);"> <fieldset id="options"><input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> </fieldset> </form> </body> </html>

  • form の checkbox の配列 name の選択値を confirm画面に出すには？

    form の checkbox の name を配列で記述しました（ PHP で受け取るのに便利なので）が、checked value を confirm画面に出すことができません。 ご存知の方、お教えください。 ソースおよび分からない部分はつぎのとおりです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www/w.w3.org/TR/REC-html14/loose.dtd"> <HTML> <HEAD> <META http-equiv=content-type content="text/html;charset=Shift_JIS"> <TITLE>よろしくお願いします。</TITLE> <META http-equiv=content-Style-type content="text/css"> <script type="text/javascript"> <!-- function conf(tfm) { wrt = "選択項目は以下でよろしいですか？\n\n" /* この部分に書くべき script がわかりません。 　 よろしくお願いいたします。m(_ _)m 　　　　*/ confirm ( wrt ) ; } //--> </script> </HEAD> <BODY> <form name=tfm action="http://localhost/form.php" method=post> <BR>選択してください。（複数選択可）<BR><BR> <input type=checkbox name="abc[]" value="A ">A,　 <input type=checkbox name="abc[]" value="B ">B,　 <input type=checkbox name="abc[]" value="C ">C,　 <input type=checkbox name="abc[]" value="D ">D,　 <input type=checkbox name="abc[]" value="E">E<BR><BR> <input type=button value="確 認" onClick="conf(tfm)"> 　<input type=reset value="キャンセル"> </form> </BODY> </HTML>

  • ＣｈｅｃｋＢｏｘの入力チェックについて

    CheckBoxの入力チェックについて CheckBoxの数は可変です。 全て未チェックのときにalertを表示したいです。 今はチェックしてもalertが表示されてしまいます。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>チェックボックス入力チェック</title> <SCRIPT TYPE="text/javascript"> <!-- function item_check() { count = 0; for (i=0;i<=document.form1.elements['item[]'][i].length;i++){ if(document.form1.elements['item[]'][i].checked){ count++; } } if(count==0){ alert("項目を選択してください。"); return(false); } return(true); } --> </SCRIPT> </head> <body> <form name="form1" method="POST" action="test.htm" onSubmit="return item_check()"> <p><input type="checkbox" name="item[]" value="1">項目1</p> <p><input type="checkbox" name="item[]" value="2">項目2</p> <p><input type="checkbox" name="item[]" value="3">項目3</p> <p><input type="checkbox" name="item[]" value="4">項目4</p> <p><input type="checkbox" name="item[]" value="5">項目5</p> <input type="submit" name="kakunin" value="確認"> </form> </body> </html>

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 ３つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか？ <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • checkbox 特定項目だけを、チェックするには

    こんにちは。いつもお世話になります。 checkbox内で、同じnameの中から特定のものだけ チェックさせるにはどうしたら良いでしょうか。 条件として、name='or52'の部分は変更出来ません。 <input type='button' value='A,B,Cだけを同時にチェック' onclick='checkAll();'> <form action='xxx.cgi' method='post' name='f1'> <input name='or5' type='checkbox' value='A'><br> <input name='or5' type='checkbox' value='B'><br> <input name='or5' type='checkbox' value='C'><br> <input name='or5' type='checkbox' value='D'><br> <input name='or5' type='checkbox' value='E'><br> <input name='or5' type='checkbox' value='F'><br> ......... </form> それで、こんなのをウェブから探してきました。 function checkAll() { for (i=0; i<7; i++) document.f1.elements["or52"+i].checked = true; } そして、同時にチェックしたいものだけ下記の様にしました。 <input name='or52' type='checkbox' value='A' id='or51'> <input name='or52' type='checkbox' value='B' id='or52'> <input name='or52' type='checkbox' value='C' id='or53'> 取りあえずできますが、エラーがでます。 「document.f1.elements["..."]は、objまたはnullではない！」 どうか教えて下さい。よろしくお願いします。

  • checkbox の入力チェックのやり方について

    お世話になります。 フォームにて、 javascriptで、入力チェックをおこないたいと思っています。 チェックボックスについては、どれか選択が一つでもなければ、アラートで、文字を出したいと思いますが、うまくできません。 チェックボックスの入力確認の方法を教えてください。 よろしくお願いいたします。 現在作りかけのソースは、下記の通りです。 <html> <head><title>-</title></head> <body> <form method="post" action="" onsubmit="return form_Validator(this)"> <input type="text" name="a1" size="15" maxlength="12"> <BR> <input type="checkbox" name="a1001" value="1"> <input type="checkbox" name="a1002" value="1"> <input type="submit" value="登録" name="submit"> </form> <script Language="JavaScript"> <!-- function form_Validator(doc) { if ( doc.a1.value == "" ) { alert( "BAD" ); return false; } /* a1001かa1002のチェックボックスのチェックがなければアラート----*/ return (true); } //--> </script> </body> </html>

  • Javascript　ポップアップウィンドウでのデータの受け渡し

    よくある○○度チェックみたいなものを作っているのですが、 項目が10個程あって、 「チェックが0個～4個のあなたは、△△△！！」 「チェックが5個～7個のあなたは、◇◇◇！！」 「チェックが8個～10個のあなたは、◎◎◎！！」 という流れなのです。 で、その３パターンの結果ごとに異なる HTMLをポップアップウィンドウで表示させたいのです。 たいていは次のページに結果を表示させるパターンですが、ここをポップアップ表示させたいのです。 しかも３つそれぞれのHTMLに。 <script language="JavaScript"> function myCheck(){ myCnt=0 // チェックした数 for (i=0; i<document.myForm.length-1; i++){ // チェックボックスの数分ループ if (document.myForm.elements[i].checked == true){ // チェックはオンか? myCnt++ // チェック数 加算 } } if ( myCnt <= 3 ){ // チェックは　無し(ゼロ) myUrl = "check_1.html"; } else if ( myCnt <= 5 ){ // チェックは 1以上6以下 myUrl = "check_2.html"; } else if ( myCnt > 5 ){ // チェックは 1以上6以下 myUrl = "check_3.html"; } funMsgUrl(myUrl) } function funMsgUrl(url){ location.href = url } </script> 　・ 　・ 　・ <form name="myForm"> <input name="checkbox1" type="checkbox">項目<br> <input name="checkbox2" type="checkbox">項目<br> <input name="checkbox3" type="checkbox">項目<br> 　・ 　・ 　・ <input name="checkbox9" type="checkbox">項目<br> <input name="checkbox10" type="checkbox">項目<br> </form> <input type="button" onClick="myCheck(); return false;" value="チェック"> すみませんが、助言をお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する