• ベストアンサー

jquery、javascriptについて

あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。

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

  • ベストアンサー
  • ok_kkkkkk
  • ベストアンサー率100% (3/3)
回答No.2

<script type="text/javascript"> <!-- $(function(){ $("div.a").each(function(index){ $(this) .mouseover(function(){ $(this).css("cursor", "pointer").css("background-color", "#FF0000") }) .click(function(){ $("input.b:eq(" + index + ")").attr("checked", "checked") }) }); $("input.b").each(function(index){ $(this).click(function(){ $("div.a:eq(" + index + ")").css("background-color","#CCCCCC") }) }) }); //--> </script> <style type="text/css"> div.a { width : 20px; height: 20px; background-color: #CCCCCC; } </style> </head> <body> <div class="a">1</div> <div class="a">2</div> <input class="b" type="checkbox" value="" /> <input class="b" type="checkbox" value="" /> </body>

trfnc223
質問者

お礼

ご回答ありがとうございます。 参考にして試してみます。

その他の回答 (1)

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

jqueryは使用したことがないので、よくわかりませんが・・・ こんな感じでいけるのでは？（一部省略） （適当に書いているので、jquery上、正しいかどうかは確認してください） <html> <head> <style> .hoge{width:20px; height:20px; background-color:#CCCCCC;} </style> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ var e=$("div.hoge"); for (var i=0; i<e.length; i++){ e[i].onmouseover=function(){this.style.cursor='pointer';}; e[i].onclick=function(){this.style.backgroundColor='#FF0000';$('input.'+this.id).attr("checked","checked");}; } } </script> </head> <body> <div class="hoge" id="first">1</div> <div class="hoge" id="second">2</div> <div class="hoge" id="third">3</div> <div class="hoge" id="forth">4</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> <input class="third" name="test" type="checkbox" value="" /> <input class="forth" name="test" type="checkbox" value="" /> </body> </html> 一応、first、secondを照合用に使用しているけど、 ＞1番目のdivをクリックしたら、inputの一番目にチェックのような＞ことです。 順序関係が確実なら、document内の順番で照合すればよいので、idやclass指定もなくてもよくなっちゃいますね。

trfnc223
質問者

お礼

ご回答ありがとうございます。 考え方はわかるんですが、細かい記述がどうも・・ ありがとうございました。

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

関連するQ&A

  • jQueryのアニメーションについて

    jQueryのアニメーションについて聞きたいです。 チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。 フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。 そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。 その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。 現在のソースです。 【CSS/Script】 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; float:left; } </style> <script type='text/javascript'> $(window).load(function(){ $('#check1').click(function() { $("#box1").slideToggle(this.checked); }); $('#check2').click(function() { $("#box2").slideToggle(this.checked); }); $('#check3').click(function() { $("#box3").slideToggle(this.checked); }); }); </script> 【HTML】 <p> <label><input type="checkbox" id="check1">一番</label> <label><input type="checkbox" id="check2">二番</label> <label><input type="checkbox" id="check3">三番</label> </p> <div id="box1">一番を押してでるのです</div> <div id="box2">さては二番を押したから</div> <div id="box3">どれかと思えば三番でした</div> よろしくお願いいたします。

  • jqueryを使ったスクロール画面が正しく作動しません。

    jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>&nbsp;&nbsp;&nbsp;&nbsp; テスト</span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • jQuery.illuminateの使い方

    jquery.illuminateを使って、ボタンを点滅させようとしています。 あるサイトのサンプルコーディングを参考にして、作ってみました。 実行させると、jquery.illuminateの中の　rgb2hex（）で「１」が無効のエラーが出ます。 具体的には、下の original_color = rgb2hex(obj.css('background-color'));で、 cssのbackground-colorが亘っていないためのようで、 return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);がエラーとなってしまいます。 return this.each(function() { obj = $(this); if(obj.is("input")){ if(obj.css('border') == ''){ obj.css('border', 'none') }; } dead = false; original_color = rgb2hex(obj.css('background-color')); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } プログラムコーディングを一部割愛して表示します。 どこが間違っているのか教えてください。 よろしくお願いします。 <html> <head> <title>工事実行予算管理システム</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/kjiact.css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <jsp:useBean id="MNT2000_00Form" scope="request" class="jp.co.nics.kjiact.web.MNT2000_00Form" /> <Script type="text/javascript" src="common/jquery-1.9.1.js"> </Script> <Script type="text/javascript" src="common/jquery-ui-1.10.2.custom.min.js"> </Script> <Script language="JavaScript" src="common/jquery.illuminate.0.7.js"> </Script> <Script language="JavaScript"> $('#next_btn').illuminate(); </Script> <!-- CSS --> <style media="screen,projection" type="text/css"> #next_btn { background:#333333; padding:20px; color:#ffffff; width:400px; } </style> </head> <body > <td width="15%" align="left"> <div id="next_btn"><input type="button" class="next_btn" name="next" value="次へ（代価表）" onClick="toDetail();"/></div></td> </body> </html>

  • jquery slickに関して教えて下さい。

    jquery初学者です。 slickのシングルモードは動作するのですが、 センターモードの実装が上手くできないため、対処法を教えて下さい。 ////code//// <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト用</title> <script src="js/jquery-1.11.2.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.your-class').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] }); }); </script> </head> <body> <div class="your-class"> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> </div> <style> .your-class{ width:350px; margin-left:50px; } .test{ background-color: #00f; } </style> </doby> </html> scriptのファイル等はシングルモードが動作済みであるため、 ダウンロード等は済んでいると思われます。 よろしくお願い致します。 補足 参考としたサイトはこちらです。 http://kenwheeler.github.io/slick/ よろしくお願い致します。

  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • jQueryでajax

    ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX
  • jqueryとlightboxが一緒に動作しない

    jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか？ ソースコードは以下のようになっています。 <?xml version="1.0" encoding="shift_jis"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() { 　　$("#menu_list p.menu_head").mouseover(function() { 　　　　$(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); 　　　　$(this).siblings(); 　　}); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { 　width: 640px; 　height: 415px; 　margin: 0; 　padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ 　　　　　new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • HTMLで○や■などをテキストの代用とした時

    HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？ 教えてください。 よろしくお願い致します。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する