- ベストアンサー
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の一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。
- trfnc223
- お礼率63% (111/174)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
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指定もなくてもよくなっちゃいますね。
お礼
ご回答ありがとうございます。 考え方はわかるんですが、細かい記述がどうも・・ ありがとうございました。
お礼
ご回答ありがとうございます。 参考にして試してみます。