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の一番目にチェックのようなことです。
そんなことができるのでしょうか？
具体的に教えていただけると幸いです。
よろしくお願いいたします。
お礼
自分でもいろいろためしましたが、だめだったのであきらめて 他の方法を考えてみます。 スコープについてのリンク先もとても参考になりました。 ありがとうございました！