チェックボックスで画像を一括表示する方法

このQ&Aのポイント
  • チェックボックスのON / OFFで画像を表示する方法と、全てのチェックボックスのON / OFFを切り替える方法を組み合わせて、全てのチェックボックスのON / OFFを切り替えて画像を一括表示することができます。
  • ただし、全てのチェックボックスのON / OFFの切り替えに伴って画像の表示・非表示も反応するわけではありません。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。
  • 上記サイトを参考に、HTMLソースにチェックボックスのコードを追加してください。また、JavaScriptを使用してON / OFFの切り替えに応じて画像の表示・非表示を制御します。
回答を見る
  • ベストアンサー

チェックボックスで画像を一括表示

下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>

  • wgiq
  • お礼率6% (1/15)

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

  • ベストアンサー
回答No.5

あれこれ、なおしてたら、こうなっちゃった~! すくりぷとがどうであれ、だいじなのは、てんたいのしゃしんだじょ! いいしゃしん、いっぱいとってね。 ばぶぅ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="jp"> <head> <title>天体写真集</title> <style type="text/css"> h1 {margin-bottom:2ex; } .L { float:left; width:200px; background-color:#fee; } #PhotoList { margin-left:200px; } #PhotoList img { width:150px; height:150px; } </style> </head> <body> <h1>天体写真集</h1> <div class="L"> <FORM action="#" name="f1"> <ol> <li><input type="checkbox" name="c1" checked>朝焼に輝く星</li> <li><input type="checkbox" name="c1" checked>木立の隙間から</li> <li><input type="checkbox" name="c1" checked>夜明け</li> <li><input type="checkbox" name="c1" checked>自転を感じる</li> <li><input type="checkbox" name="c1" checked>昼の星空</li> <li><input type="checkbox" name="c1" checked>砂丘の月</li> <li><input type="checkbox" name="c1" checked>月の軌跡</li> <li><input type="checkbox" name="c1" checked>彗星の飛来</li> <li><input type="checkbox" name="c1" checked>彗星</li> <li><input type="button" value="全てOn"><input type="button" value="全てOff"></li> </ol> </FORM> </div> <div id="PhotoList"> <img src="photo01.jpg" alt="朝焼に輝く星"> <img src="photo02.jpg" alt="木立の隙間から"> <img src="photo03.jpg" alt="夜明け"> <img src="photo04.jpg" alt="自転を感じる"> <img src="photo05.jpg" alt="昼の星空"> <img src="photo06.jpg" alt="砂丘の月"> <img src="photo07.jpg" alt="月の軌跡"> <img src="photo08.jpg" alt="彗星の飛来"> <img src="photo09.jpg" alt="彗星"> </div> <script type="text/javascript"> document.onclick = function (evt) {  var e = evt ? evt.target: event.srcElement;  var n, t,p,c=0;  if ('INPUT' == e.nodeName) {   if ('c1' === e.name) {     p = getParent(e, 'nodeName', 'LI');     n = childCount(p, 'nodeName', 'LI');     t = document.getElementById('PhotoList').getElementsByTagName('IMG')[n];     t.style.visibility = e.checked ? 'visible': 'hidden';   }   if ('全てOn' == e.value) {    p = document.getElementsByName('c1');    t = document.getElementById('PhotoList').getElementsByTagName('IMG');    while (n = p[c]) {     n.checked = true;     t[c++].style.visibility = 'visible';    }   }   if ('全てOff' == e.value) {    p = document.getElementsByName('c1');    t = document.getElementById('PhotoList').getElementsByTagName('IMG');    while (n = p[c]) {     n.checked = false;     t[c++].style.visibility = 'hidden';    }   }  } }; function getParent (node, type, val) {  return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function childCount (node, type, val) {  var c = 0; while (node = node.previousSibling) if (node[type] == val) c++; return c; } </script>

wgiq
質問者

お礼

大変助かりました。ありがとうございました!!

その他の回答 (4)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.4

> 以下では動かないのですが・・これではだめなのでしょうか JavaScriptの部分何が変わったの? 何も変わっていない様に見えるけど。 showを呼ばないと画像処理は走らないことはわかっているのよね? 呼ぶように何も変わっていないじゃない。 ぶっちゃけ#2さんの言うとおりにやればできるはずよ。

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

>> 単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか? まずはやってみる。 質問はそれから。

wgiq
質問者

補足

すみません。いろいろやってみました・・・。 画像をデフォルト表示に変更しました。それはできたのですが・・・。 ▼以下では動かないのですが・・これではだめなのでしょうか? <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> <HTML> <HEAD> <TITLE>天体写真集</TITLE> <script language="JavaScript" src="js/all.js"></script> <script language="JavaScript" src="js/basic.js"></script> </HEAD> <BODY> <H1>天体写真集</H1> <BR> <TABLE width=610 align=right border=0 cellspacing=0 celpadding=0> <TR><TD width=610> <IMG src="photo01.jpg" id="img01" style="width:200px"> <IMG src="photo02.jpg" id="img02" style="width:200px"> <IMG src="photo03.jpg" id="img03" style="width:200px"> <IMG src="photo04.jpg" id="img04" style="width:200px"> <IMG src="photo05.jpg" id="img05" style="width:200px"> <IMG src="photo06.jpg" id="img06" style="width:200px"> <IMG src="photo07.jpg" id="img07" style="width:200px"> <IMG src="photo08.jpg" id="img08" style="width:200px"> <IMG src="photo09.jpg" id="img09" style="width:200px"> </TD></TR> </TABLE> <FORM name="f1"> <INPUT type=checkbox name="c1" onClick="show(0,'img01')" checked>朝焼に輝く星<BR> <INPUT type=checkbox name="c1" onClick="show(1,'img02')" checked>木立の隙間から<BR> <INPUT type=checkbox name="c1" onClick="show(2,'img03')" checked>夜明け<BR> <INPUT type=checkbox name="c1" onClick="show(3,'img04')" checked>自転を感じる<BR> <INPUT type=checkbox name="c1" onClick="show(4,'img05')" checked>昼の星空<BR> <INPUT type=checkbox name="c1" onClick="show(5,'img06')" checked>砂丘の月<BR> <INPUT type=checkbox name="c1" onClick="show(6,'img07')" checked>月の軌跡<BR> <INPUT type=checkbox name="c1" onClick="show(7,'img08')" checked>彗星の飛来<BR> <INPUT type=checkbox name="c1" onClick="show(8,'img09')" checked>彗星<BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.c1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.c1)"> </FORM> </BODY> </HTML>

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

理由はNo1様の回答の通りです。 簡単に修正するなら、チェックボックスをセットした後で、 show(i,'img0' + (i+1)); とか…

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

関数showで画像の切り替えを行っている、 これは判っているわね? でも、 チェックボックスをクリックするときにしか呼び出していないわね。 「▼全てのチェックボックスのON / OFFを切り替えるJavaScript」 のときにも呼び出してあげないとダメよ。

wgiq
質問者

補足

ありがとうございます! 「全てのチェックボックスのON / OFFを切り替えるJavaScript」に 呼び出しを組み込む場合は、 単純に関数showで画像の切り替えのスクリプトを追加すれば良いのでしょうか? JavaScriptの知識が乏しくて・・すみません・・。 宜しくお願いします。

関連するQ&A

  • チェックボックスの表示・非表示 動作

    はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB=AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE-A=BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <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='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。

  • チェックボックスの全選択

    <input type="checkbox" name="chk" value=1> <input type="checkbox" name="chk" value=2> <input type="checkbox" name="chk" value=3> <input type="checkbox" name="chk" value=4> <input type="checkbox" name="chk" value=5> このように同一名称のチェックボックスに対して ボタンを押下された時全てのチェックボックスを チェックするJavaScriptの 書き方を教えて貰えないでしょうか

  • フォームの上下に一括チェックボックスを置くには?

    HTML+Javascriptで、選択削除のフォームを作っています。 一覧の上下に一括チェックボックスを置きたいのですが上手く行かないのです。 -------------------- javascript↓ -------------------- //一括チェック用チェックボックス function allcheck() { var count = document.delete.chk.length; var allcheck = document.delete.chk_all.checked; for ( var i=0; i<count; i++) { var check = document.delete.chk[i].checked; if (allcheck == true) { document.delete.chk[i].checked = true; } else { document.delete.chk[i].checked = false; } } } //個別チェック用チェックボックス function check(onjCheck) { if (onjCheck.checked == false) { document.delete.chk_all.checked = false; return; } var count = document.delete.chk.length; for (var i=0; i<count; i++) { if (document.delete.name != "chk_all" && document.delete.chk[i].checked == false) { return; } } document.delete.chk_all.checked = true; } -------------------- HTML↓ -------------------- <form action="" name="delete"> <fieldset> <input type="checkbox" name="chk_all" id="all_head" onclick="allcheck(this)"> <label for="all_head">すべて選択/解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> <fieldset> <input type="checkbox" name="chk" onclick="check(this)"> 項目1 <input type="checkbox" name="chk" onclick="check(this)"> 項目2 <input type="checkbox" name="chk" onclick="check(this)"> 項目3 </fieldset> <fieldset> <input type="checkbox" name="chk_all" id="all_foot" onclick="allcheck(this)"> <label for="all_foot">すべて選択/解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> </form> このように記述しています。 上か下か、片方であれば一括チェックを実現できました。 当方Javascript初心者です。 よろしくご教示願います。

  • javascriptでチェックボックスの選択状況をチェックする方法につ

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?

  • チェックボックスの無効化、有効化

    あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号(t1、t2、t3やc1、c2、c3)が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか? nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <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>

  • チェックボックスのON / OFFで画像を表示する

    初めまして、以下のURLを参考に制作していましたが、DOCTYPEを指定すると画像が表示されず困っております。 http://iswebmag.hp.infoseek.co.jp/sample163.html 指定したDOCTYPEは以下のものです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTMLソースは以下です。下記ソースの※DOCTYPEが無ければ動きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.form.elements[c].checked == true){ document.getElementById(img).style.width=35; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> </HEAD> <BODY> <H1>天体写真集</H1> <BR> <TABLE width=610 align=right border=0 cellspacing=0 celpadding=0> <TR><TD width=610> <IMG src="../images/color_n-1.gif" id="img01" style="width:0px"><IMG src="../images/color_n-2.gif" id="img02" style="width:0px"><IMG src="../images/color_n-3.gif" id="img03" style="width:0px"><IMG src="../images/color_n-4.gif" id="img04" style="width:0px"><IMG src="../images/color_n-5.gif" id="img05" style="width:0px"><IMG src="../images/color_n-6.gif" id="img06" style="width:0px"><IMG src="../images/color_n-7.gif" id="img07" style="width:0px"><IMG src="../images/color_n-8.gif" id="img08" style="width:0px"><IMG src="../images/color_n-9.gif" id="img09" style="width:0px"> </TD></TR> </TABLE> <FORM name="form"> <INPUT type=checkbox onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox onClick="show(8,'img09')">彗星 </FORM> </BODY> </HTML> ヒントでもお教え頂ければ幸いです。m(_ _)m 何卒、宜しくお願い申上げます。

  • selectメニューによるチェックボックスの表示・非表示

    リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見/回答を頂けませんでしょうか?宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>

  • チェックボックスで得たデータを送信する場合

    CGIでデータの受け渡しを行い、決められたアドレスへ結果を送信するアンケートをつくっています。以前、チェックボックスで複数回答可とした場合の制限のかけ方をJavaScriptを用いた方法で教えてもらいましたが、これを利用して得た値をCGIで受け取りたいのですが、どうやって設定すればいいのでしょうか。「name」がそれぞれ名前が違う所でつまずいています。また<form method=post action="***.cgi">~</form>と項目全体をくくればいいのでしょうか?参考までに以下のHTMLを付記いたします。 <html> <head> <title>5個のうち3個しかチェックできないようにする</title> <script Language="JavaScript"><!-- function check(n) { fOBJ = document.myFORM; count = 0; for (i=1; i<=5; i++) if (fOBJ["CB"+i].checked) count++; if (count > 2) { alert("3個以上チェックできません"); fOBJ["CB"+n].checked = false; } } // --></script> </head> <body> <form name="myFORM"> <input type="checkbox" name="CB1" onClick="check(1)">チェック1<br> <input type="checkbox" name="CB2" onClick="check(2)">チェック2<br> <input type="checkbox" name="CB3" onClick="check(3)">チェック3<br> <input type="checkbox" name="CB4" onClick="check(4)">チェック4<br> <input type="checkbox" name="CB5" onClick="check(5)">チェック5<br> </form> </body> </html>

    • ベストアンサー
    • CGI
  • チェックボックスの値を取り出したい

    こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ?マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが... 3つチェックされていてOKをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value    ? var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="OK" > </form> </html>

  • ドロップダウンメニューで選択された内容通りにチェックを入れるJS

    ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>