• ベストアンサー

ラジオボタンが選択された項目のみ操作可能

ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled？readonly？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; //　ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

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

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

じゃ、tdにidを振ってみては？ <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'cc')">高校</td> </tr> <tr> <td id="aa"> <input type="checkbox" name="aa[]" value="1" disabled/>Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" disabled />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" disabled />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb"> <input type="checkbox" name="bb[]" value="1" disabled />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" disabled />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" disabled />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc"> <input type="checkbox" name="cc[]" value="1" disabled />Ａ高校<br/> <input type="checkbox" name="cc[]" value="2" disabled />Ｂ高校<br/> <input type="checkbox" name="cc[]" value="3" disabled />Ｃ高校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

その他の回答 (4)

回答No.4

ていせいします <input ～/> のすらっしゅは、つけちゃだめだった。

回答No.3

HTMLをすっきりさせたら、すくりぷとがながくなってしまった。^^; そのうち、ちゃんとかいとうがつくでしょう～！　ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>sample</title> <form> <table border="1"> <tr> <td><input type="radio" name="mm">小学校</td> <td><input type="radio" name="mm">中学校</td> <td><input type="radio" name="mm">高校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" disabled/>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled />Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled />Ｃ小学校<br> <input type="button" value="全選択"><br> <input type="button" value="全解除"> </td> <td> <input type="checkbox" name="bb[]" value="1" disabled />Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled />Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled />Ｃ中学校<br> <input type="button" value="全選択"><br> <input type="button" value="全解除"> </td> <td> <input type="checkbox" name="cc[]" value="1" disabled />Ａ高校<br> <input type="checkbox" name="cc[]" value="2" disabled />Ｂ高校<br> <input type="checkbox" name="cc[]" value="3" disabled />Ｃ高校<br> <input type="button" value="全選択"><br> <input type="button" value="全解除"> </td> </tr> </table> </form> <script type="text/javascript"> //@cc_on document./*@if (@_jscript) attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'click', function (evt) { 　　var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; 　　var inp, f, b, c, n, o, tbl, tr, td; 　　 　　 　　if ('INPUT' === e.nodeName && 'button' === e.type) { 　　　if ('全選択' === e.value) f = true; 　　　if ('全解除' === e.value) f = false; 　　　if (undefined !== f) { 　　　　inp = e.parentNode.getElementsByTagName('input'); 　　　　for (c = 0; o = inp[c]; c++) if ('checkbox' === o.type) o.checked = f; 　　　} 　　} 　　if ('mm' === e.name) { 　　　tbl = getParent(e, 'nodeName', 'TABLE'); 　　　tr = getParent(e, 'nodeName', 'TR'); 　　　td = getParent(e, 'nodeName', 'TD').cellIndex; 　　　tr = tbl.rows[tr.rowIndex + 1]; 　　　for (b = 0; n = tr.cells[b]; b++) { 　　　　inp = n.getElementsByTagName('input'); 　　　　for (c = 0; o = inp[c]; c++) o.disabled = b != td; 　　　} 　　} 　　 　}, false); function getParent (node, type, val) { 　return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } document.getElementsByName('mm')[0].click(); </script>

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

横からですが… せっかく ＞if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=f[i].name!=n; まで考えたのならば、その後半でどのようにしてdisabled属性がセットされているのかまでを理解しておきましょう。 　 f[i].disabled = ( f[i].name != n ) ; は、そのエレメント（=f[i]）のname属性が、引数で渡された名前（=ラジオボタンから指定された名前）と同じだったら disabled = false に、そうでなければ disabled = true となるようになっています。 一方、現状のボタンにはname属性が設定されていませんので、どのボタンの場合でも名前が一致することありません。 その結果、常に値はfalseとなって操作可能にセットされていることになります。 なので、そのスクリプトで動作するようにするには、ボタンにも・・・・ ついでに、現状は初期状態で全部のボタンが操作可能になっていますから、それも・・・・ で、うまくいくと思います。

画像を拡大する
pos_pos
質問者

補足

お世話になります。 ボタンのNAMEの付け方がよくわかりません。 下記のような感じでやってみましたがダメでした... <input type="button" name = "btn[0]" value="全選択" disabled onClick="allcheck(this,true)"/><br> <input type="button" name = "btn[1]" value="全解除" disabled onClick="allcheck(this,false)"/> よろしくお願いします。

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

前回とちがいラジオボタンとチェックボックスの構造的なつながりが 薄いので、名前を指定してやるのが限界でしょうか・・・ <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ if(f[i].type=="checkbox") f[i].disabled=f[i].name!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF(this.form,'aa[]')">小学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'bb[]')">中学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'cc[]')">高校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" disabled/>Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" disabled />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" disabled />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" disabled />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" disabled />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" disabled />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="cc[]" value="1" disabled />Ａ高校<br/> <input type="checkbox" name="cc[]" value="2" disabled />Ｂ高校<br/> <input type="checkbox" name="cc[]" value="3" disabled />Ｃ高校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

pos_pos
質問者

補足

yambejpさんへ ボタンも操作不可にできますか？ if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=f[i].name!=n; こんなふうにやってみましたが... よろしくお願いします。

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

関連するQ&A

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】：小学校のみ入力可 (2)ラジオボタン【中学校】：中学校（市立・私立）のみ入力可 (3)ラジオボタン【全ての学校】：小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • チェックボックスの全選択/解除について

    お尋ねします。 チェックボックスの全選択/解除について １画面にチェックボックスのグループが複数（store、item）あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか？ よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){ 　for(n=0;n<=targetForm.length-1;n++){ 　　if(targetForm.elements[n].type == "checkbox"){ 　　　targetForm.elements[n].checked = flag; 　　} 　} } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目１<br/> <input type="checkbox" name="item[]" value="2" />項目２<br/> <input type="checkbox" name="item[]" value="3" />項目３<br/> <input type="checkbox" name="item[]" value="4" />項目４<br/> <input type="checkbox" name="item[]" value="5" />項目５<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>

    • 締切済み
    • PHP
  • ボタンで選択されていないセレクトメニューの非反映２

    前回、「ボタンで選択されていないセレクトメニューの非反映」という質問をさせて頂いたものです。 http://okwave.jp/qa/q7093835.html 文章構成などは下記のHTMLをしようしているのですが…。 「蓋付きのボックス」の＜ラジオボックスをチェックしなければ選択できない＞はクリアできたのですが、「蓋付きバスケット」の方で迷っています。 後はこれで合計金額がきちんと出ればいいのですが…、 もうすこしお力とお時間を頂けないでしょうか？ <html> <head> <title>簡単見積もり表</title> <script Language="JavaScript"> <!-- function calc() { n = 0; fObj = document.myFORM; n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value); n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value); for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value); for (i=3; i<19; i++) if (fObj[i].checked) n += eval(fObj[i].value); fObj.result.value = n; } function linker(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT" || t.type != "radio") return; var sel, i, s; sel = t.form.getElementsByTagName("select"); for(i=0; s=sel[i++];) if(/(^| )linkage( |$)/.test(s.className)){ t = s.previousSibling; while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling; if(t) s.disabled = !t.checked; } } // --></script> </head> <body> <form name="myFORM" action="#" onclick="linker(event)"> <BR> <b>セットの果物を一つお選び下さい</b><br> <input type="radio" name="ch1" value="100">りんご（100円） <input type="radio" name="ch1" value="20">バナナ（20円） <input type="radio" name="ch1" value="200">梨（200円） <input type="radio" name="ch1" value="250">ブドウ（250円） <input type="radio" name="ch1" value="150" checked>みかん（150円）<br> <BR> <b>リボンの色をお選びください</b><br> <input type="radio" name="ch2" value="0" checked>赤（0円） <input type="radio" name="ch2" value="2000">青（0円） <input type="radio" name="ch2" value="0">金（10円）<br> <hr> <b>バスケットの形をお選び下さい</b><br> <INPUT type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200<INPUT type="checkbox" name="bx1" value="500">素材を木に変更（+\500）<BR> <INPUT type="radio" name="cover" value="1500">編み込み四角\1500<BR> <INPUT type="radio" name="cover" value="1500">編み込み楕円\1500<BR> <INPUT type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円<br> <INPUT type="radio" name="cover" value="covered"><b>蓋付きのボックス</b> 色によって値段が変化します<br> <select class="linkage" name="color_of_cover" disabled> <OPTION value="0" selected>色を選択</OPTION> <OPTION value="39900">赤1000円</OPTION> <OPTION value="52500">青1000円</OPTION> <OPTION value="54600">金1100円</OPTION> </select><BR> <INPUT type="radio" name="cover" value="0"><b>蓋付きバスケット</b> 形によって値段が変化します<BR> <select name="sel1"> <OPTION value="0" selected>形を選択</OPTION> <OPTION value="1500">丸　1500円</OPTION> <OPTION value="1600">四角　1600円</OPTION> <OPTION value="1600">楕円　1600円</OPTION> </select> <br><hr><BR> <b>ご希望のオプションがあれば選択して下さい。（複数選択可）</b><BR> <INPUT type="checkbox" name="bx1" value="300">クッション材\300 <INPUT type="checkbox" name="bx1" value="200">飾り\200<BR> <INPUT type="checkbox" name="bx1" value="150">メッセージカード\150 <INPUT type="checkbox" name="bx1" value="2500">花束\2,500<BR> <BR> <hr> <input type="button" value="合計を出す" onClick="calc()"><br> 合計<input type="text" name="result"><br> </form> </body> </html>

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

  • チェックボックスやラジオボタンでの計算

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <tr> <Td Valign="middle" Width="80">部数選択</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="radio" Name="pay" Value="100部　10000円">100部　￥10,000円<Br> <Input Type="radio" Name="pay" Value="150部　20000円">150部　￥20,000円<Br> <Input Type="radio" Name="pay" Value="200部　30000円">200部　￥30,000円<Br> <Input Type="radio" Name="pay" Value="300部　40000円">300部　￥40,000円<Br> <Input Type="radio" Name="pay" Value="300部以上　※お見積もりいたします">300部以上　※お見積もりいたします<Br> </td> </tr> <tr> <Td Valign="middle" Width="80">オプション選択<Br>（複数選択可）</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br> <Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br> <Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br> <Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br> <Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br> <Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br> <Input Type="checkbox" Name="op[]" value="ＱＲコード">ＱＲコード<Br> </td> </tr> といった感じです。 value　はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか？

  • ラジオボタンについて

    こんにちは。ラジオボタンについて質問させてください。 <input type="radio" name="area" value="all" onClick="area.value = 'all'" checked>ALL<br> <input type="radio" name="area" value="a" onClick="area.value = 'a'">A<br> <input type="radio" name="area" value="b" onClick="area.value = 'b'">B<br> というHTMLを記述しました。 画面が表示された後にラジオボタンをチェックして実行（別個作成）すると うまく動作するのですが、チェックボタンをチェックしずに （デフォルトの'ALL'選択のまま）実行するとうまくいきません。 どのようにすればうまく動作するのでしょうか？

    • ベストアンサー
    • HTML
  • ラジオボタンを一括で操作する方法を教えてください。javascript

    下記のようにフォームがあります。 チェックボックスをクリックして始めて、 同列のラジオボタンが選択できるようにしたいと考えております。 現在は、質問1のみですが質問の数がその下に増えていくと考えた場合、（例えば質問10まであると仮定して考えてください。）どのようにスクリプトを書いていけば、スマートになるかお知恵を貸していただけませんでしょうか？ よろしくお願いいたします。 <form name="form1"> <table><tr> <th><input type="checkbox" name="q1_1" value="" onClick="quetion()">質問1</th> <td><input type="radio" name="q1_1a" value="a" disabled ></td> <td><input type="radio" name="q1_1a" value="b" disabled ></td> <td><input type="radio" name="q1_1a" value="c" disabled ></td> </table></form>

  • ボタンを押したらラジオボタンを選択したい(サンプルソース付)

    ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか？ ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>

  • ラジオボタンで選択した項目の合計金額を出したい

    簡単な見積フォームを作成中です。 ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。 根本的な考え方が間違っているのでしょうか？ 皆様ご教授の程お願いします。 <HTML><HEAD> <!-- function calc(){ hontai=document.ordersheet.hontai.VALUE; document.ordersheet.output.value=hontai; } //--> </SCRIPT></HEAD> <BODY> <FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()"> <TABLE cellPadding=3 width=680> <TBODY><TR> <TD align=middle colSpan=5>お見積り内容 <TR><TD align=middle width=30> <TD align=middle width=200> <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 </TD> <TR><TD rowspan="2" align=middle width=30>本体 <TD rowspan="2" width=350></TD> <TD width=145>A商品<BR>273000円（税込）<BR> <TD width=145>B商品<BR>288750円（税込）<BR> <TD width=145>C商品<BR>109410円（税込）<BR> </TD> <TR> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="273000" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="288750" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="109410" onClick="calc()"></DIV></TD> </TR> <TR><TD align=center colspan="2">合計金額</TD> <TD colspan="3" ><INPUT TYPE="text"NAME="output" SIZE="12">円</TD></TR> </TBODY></TABLE></FORM> </BODY></HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する