javascriptが効かない…

2023/10/15 08:19

このQ&Aのポイント

上下のチェックボックスを操作してリンクの表示を切り替えたいが、うまくいかない
チェックボックスを全選択した後に特定のリンクのチェックを外すと、別のリンクが選択された状態になってしまう
メニューの表示をリンクBに切り替えたいが、うまく表示されない

ベストアンサー

javascriptが効かない・・・

2008/02/24 13:43

上下のチェックボックス（全チェック）をした後にリンクAのチェックをはずすとリンクBがチェックされている状態になります。そのときメニューがリンクBがリンクされている状態にしたいのですがうまくいきません。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <script type="text/javascript"> function pulldown(flg){ if(flg==0){ addInfoLink.style.visibility="visible"; }else{ updateInfo.style.visibility="visible"; } } function check(){ var cnt = 0; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; for(i=0; i<document.forms[0].check1.length; i++){ if(document.forms[0].check1[i].checked == true){ cnt++; if(document.forms[0].check1[i].value==0){ alert("●"); muneHikasei.style.visibility="hidden"; linkB.style.visibility="visible"; return; }else if(document.forms[0].check1[i].value==1){ alert("▲"); muneHikasei.style.visibility="hidden"; linkA.style.visibility="visible"; return; } } } if(cnt==0){ linkB.style.visibility="hidden"; linkA.style.visibility="hidden"; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; muneHikasei.style.visibility="visible"; } } var allFlg=false; function allCheckAction(){ if(allFlg== false && document.forms[0].allCheck1.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck2.checked=true; return; } if(allFlg== true && document.forms[0].allCheck1.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck2.checked=false; return; } if(allFlg== false && document.forms[0].allCheck2.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck1.checked=true; return; } if(allFlg== true && document.forms[0].allCheck2.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck1.checked=false; return; } } </script> </head> <body> <div id="muneHikasei" style="position:absolute; visibility:visible; left:9; top:28;">リンク</div> <div id="linkB" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javaScript:void(0)" onclick="pulldown(0)">リンク</a> <div id="addInfoLink" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> リンクA<br /> <a href="">リンクB</a> </div> </div> <div id="linkA" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javascript:void(0)" onclick="pulldown(1)">リンク</a> <div id="updateInfo" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> <a href="">リンクA</a><br /> リンクB </div> </div> <br><br><br><br><br> <form name="" method="post"> <input type="checkbox" name="allCheck1" value="1" onclick="allCheckAction()"/> <br> <input type="checkbox" name="check1" value="1" onclick="check()"/>リンクA <br> <input type="checkbox" name="check1" value="0" onclick="check()" />リンクB <br> <input type="checkbox" name="allCheck2" value="1" onclick="allCheckAction()"/> </form> </body> </html>

iemon_gori
お礼率62% (5/8)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

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

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2008/02/24 18:21 回答No.1

こんにちは positionによって重ね表示をしているので常に『id="linkA"』のボックスが表示されています『リンクＡのみ』、『リンクＢのみ』、『両リンク』の3つのブロックを用意して選択によって・『z-index』コントロールするか、・『display:block; ←→none;』切り替えをするといいですよ質問のとはアプローチが違いますが、最終的にはこういうことがしたい？ <script type="text/javascript"></script> <body style="background-color:aqua;"> <div style="margin:9px 28px 0px 0px;"> <span id="menu1">リンク</span> <span id="menu2" style="display:none;"><a href="javascript:void(0)" onclick="pulldown()">リンク</a></span> <div id="linkmenu" style="margin-left:4px;width:80px;background-color:#FFFFFF;visibility:hidden;"> <div> <span id="linkA1">リンクＡ</span> <span id="linkA2" style="display:none;"><a href="">リンクＡ</a></span> </div> <div> <span id="linkB1">リンクＢ</span> <span id="linkB2" style="display:none;"><a href="">リンクＢ</a></span> </div> </div> </div> <form name="" method="post" id="forms"> <input type="checkbox" name="allCheck1" value="" onclick="allCheckAction()"/> <br> <input type="checkbox" name="check1" value="" onclick="check()"/>リンクA <br> <input type="checkbox" name="check1" value="" onclick="check()" />リンクB <br> <input type="checkbox" name="allCheck2" value="" onclick="allCheckAction()"/> </form>

質問者

お礼 2008/02/24 23:34

すみませんまた質問させていただきます。 <input type="checkbox" name="check1" value="" onclick="check()"/>リンクAとありますが、valueの値を見て0ならリンクAのみリンクする、1ならリンクBのみリンクするようにしたいのです。可能でしょうか。よろしくお願いいたします。

質問者

補足 2008/02/24 23:15

ありがとうございます。最終的にやりたい事はleap_dayさんが作っていただいたサンプルと同じです。ちょっと私にはスキルがなくてわからないので今から勉強したいと思います。また詰まってしまったらすみませんが教えてください。ありがとうございました。

その他の回答 (1)

leap_day
ベストアンサー率60% (338/561)

2008/02/26 02:10 回答No.2

こんにちは可能は可能ですが・・・ value値を見てリンクＡのみ、リンクＢのみにするということは両方リンクの場合は無いということですよね？その場合、『checkbox』というよりも『radio』ということになりますが？『checkbox』にしても『radio』にしても、考えなければならない点が色々出てくると思います・allcheckを押したときに何処を主にチェックをつけるのか・『checkbox』の場合、2個以上チェックされていたらどう判断するのか・サンプルだから2個だけ？実際に使用する時はまだ選択肢がある？一応大きな問題点はこの3点流れ的には allcheckを別々のfunctionにしてそれぞれ対応した部分にチェックをつけるか、 allCheckAction('0'),allCheckAction('1')などのようにして allCheckAction(n) { } 内で if(n == "0") { リンクＡのradio(checkbox)をチェック } if(n == "1") { リンクＢのradio(checkbox)をチェック } check() { } 内で (radioの場合) b = document.getElementById("forms").check1; for(i=0;i<b.length;i++) { if(b[i].checked) { b_val = b[i].value; } } でvalue値を取れますので if(b_val == "0") { リンクＡのリンクを可能に } if(b_val == "1") { リンクＢのリンクを可能に } といった感じになります上で挙げた3点を考慮に入れつつやってみてくださいそれでダメなようでしたら考えをまとめて新規に上げてみて下さい(質問が古くなると個人間のやり取りになってしまって偏った（？）知識を与えてしまいますし、幸いこのカテにも尊敬している方が数名おられますのでその方からより良いサンプルを頂けるかもしれませんので（＾＾）

質問者

お礼 2008/02/26 23:28

leap_dayさんたびたびのヒントならびに回答ありがとうございます。 leap_dayさんが疑問に思うのは確かにそのとおりです。がクライアントの要望なのでこのような結果になってしまったのです。チェックボックスの数は動的に変化します（サーバ側の処理にてリストを返却するイメージです）。その際にある値を見てvalueに0か1を設定します。一番先頭にチェックされたものが有効となりその情報を元にリンクをクリックします。つまり全チェックはまったく意味のないものなのです・・・。 leap_dayさんの情報を元に何とか仕上げてみたいと思います。本当にありがとうございました。感謝しております。

関連するQ&A

チェックボックスの連動でJavaScriptの記述を短くしたい。
【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。 /************参考ソースです*****************/ <html> <head> <title>無題ドキュメント</title> <script> function check_a(){ if(document.form.a.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_b(){ if(document.form.b.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } function check_aa(){ if(document.form.aa.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_bb(){ if(document.form.bb.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } </script> </head> <body> <form name="form"> 項目【あ】 <input type="checkbox" name="a" onclick="check_a()"> A<BR> <input type="checkbox" name="b" onclick="check_b()"> B<BR> <br /> 項目【い】 <input type="checkbox" name="aa" onclick="check_aa()"> A<BR> <input type="checkbox" name="bb" onclick="check_bb()"> B<BR> <br /> </form> </body> </html> /*************************/ 何卒、宜しくお願い申上げます。m(_ _)m
- ベストアンサー
- JavaScript
JavaScriptがfirefoxで作動しない
IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・！ <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。
- ベストアンサー
- JavaScript
リンクレイヤー表示の切り替えについて
　もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。　ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。　リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript">  </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
javascriptにフェードインを追加したい。
下記のjavascriptに、フェードイン効果を追加するにはどうすればいいでしょうか？現在は、クリックで、テキストが切り替わる仕様になっているんですが、これにフェードイン、フェードアウトの機能を付け加えたいです。また、切り替わった際に下記のようにCSSの.actveをclass=""に追加させたいのですが、どうすれば可能でしょうか？目的は、アクティブになったボタンの背景を変更したい為です。 <div class="button actve"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div> 【javascript】 function ChDsp2(strShow,classHidden){ var tags=document.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ if(tags[i].className.match('textALL')){ tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,""); if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide'; } } return false; } function checkd1(){ document.FORM.CHECK1.checked=true document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=false } function checkd2(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=true document.FORM.CHECK3.checked=false } function checkd3(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=true } function change(c) { var f = c.checked, btn = c.form.elements['btn1']; btn.disabled = f?false:true; f = f?'sozai/button_2.jpg':'sozai/button_1.jpg'; btn.style.backgroundImage = 'url(' + f + ')'; } 【HTML】 <div class="button"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div> <div class="button"><a href="#" onclick="checkd2();return ChDsp2('text2','textALL');">ボタン２</a></div> <div class="button"><a href="#" onclick="checkd3();return ChDsp2('text3','textALL');">ボタン３</a></div> <div class="clear"> </div> <div class="area"> <form name="FORM"> <div id="text1" class="textALL"> その１、ここは最初に表示されています。 </div> <div id="text2" class="textALL hide"> その２、ここはボタン２をクリックで表示されます。 </div> <div id="text3" class="textALL hide"> その２、ここはボタン３をクリックで表示されます。 </div> </form> </div> 上記は、以前頂いたプログラムをわかる範囲で改造したものなのですが、限界を感じまして、どなたか教えて頂けたら助かります。宜しくお願いします。
- ベストアンサー
- JavaScript
カテゴリをクリックして、リンク先一覧を表示させたい
テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。しかも２回クリックしないと表示されません（泣「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク１</a><BR> <BR> <A href="javaScript:pullDown02()">リンク２</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
プルダウンとチェックボックスの連動
はじめましてよろしくおねがいします。やりたいことはプルダウンのメニューの中身を活性したり非活性にしたいのですが、どのようにやるのか想像がつきません。以下にソースを貼り付けました。チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。チェックが外れたときはメニューの中身はすべてリンクで表示します。現状はすべてリンクしかできていないです。チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
onMouseOver，Outを使用したドロップダウン型メニューを作りたい
★ヘッダ内 function mymenu(titles){ if((document.getElementById) && (!document.all)) { titles=document.getElementById(titles).style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } else{ titles=document.all[titles].style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } } ★本文 <base target="_blank"> （…中略…） <td class="top_menu" align="center" nowrap bgcolor="#000099" width="60" height="23"> <a style="text-decoration:none" href="JavaScript:mymenu('drop1')" target="_self">仮名</a><br> <div id="drop1" style="position: absolute; width: 120px; height: 60px; background-color: #000099; visibility:hidden"> <a href="#" target="_blank">あ</a><br> <a href="#" target="_blank">い</a><br> <a href="#" target="_blank">う</a><br> </div> </td> 上が現在のソースで、テーブルでレイアウトしています。これをonMouseOver，Outを使用したドロップダウン型メニューにできないでしょうか？宜しくお願いいたします。 <イメージ>http://www.adobe.co.jp/　…フラッシュは不要です。
- ベストアンサー
- JavaScript
JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx　とpd1が作動し、div　ID1がプルダウンメニューのように開くようになっています。それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の　name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？　　どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
フォーム入力チェックの効率のよいソース
こんにちは、おせわになります。アンケートを作っています。内容が何項目かあり、そのうちの多くがラジオボタンによるものです。入力チェックを行う際に下記のような形で行っておりますが、ひとつの項目につき、ラジオボタンが10個ほど用意されてるものもあり、 10個分 document.forms.reason[0].checked==false) && と付け足していくのは効率が悪いとおもいます。簡潔にソースを書くにはこの部分をどう書けばいいか教えてください。多分forを使うのかなとは思いますがよくわかりません。それと念のため補足ですが、ひとつの関数の中にすべてのチェックを入れたいので性別のラジオボタン分の関数、年代のラジオボタン分の関数のように分けずに書いています。 function aaa() { if ((document.forms.reason[0].checked==false) && (document.forms.reason[1].checked==false)){ alert("ボタンが未選択です"); return false ; } if ((document.forms.sei[0].checked==false) && (document.forms.sei[1].checked==false)){ alert("ボタンが未選択です"); return false ; } if ((document.forms.age[0].checked==false) && (document.forms.age[1].checked==false)&& (document.forms.age[2].checked==false)&& (document.forms.age[3].checked==false)){ alert("ボタンが未選択です"); return false ; } ・・・・・・・・・・・・・・・つづく } //--> </script> よろしくお願いします！
- ベストアンサー
- JavaScript
ネスケで文字化けするjavascript
下記はenterキーを押した時に次のテキストボックスなどにフォーカスを移動するjavascriptです。しかし、ネスケだとテキストボックスに入力した文字が文字化けしてしまいます。 
- ベストアンサー
- JavaScript

javascriptが効かない…

javascriptが効かない・・・