----- 実現したいこと -----------------------------

以下をjQueryを使って実現したいです。

・「名前」のうちどれか1つが選択されたら
 「名前」の背景を白くする。(「名前」ulタグのbackground-colorを#ffffffへ)
・「季節」のうちどれか1つが選択されたら
 「季節」の背景を白くする。(「季節」ulタグのbackground-colorを#ffffffへ)

方針だけでもご教授いただければ幸いでございます。



----- ソース -------------------------------------

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
□名前<br>
<ul style="background-color:#ff0000;">
<input type="checkbox" value="1">一郎<br>
<input type="checkbox" value="2">二郎<br>
<input type="checkbox" value="3">三郎
</ul>
<br>
<br>
<br>
□季節<br>
<ul style="background-color:#ff0000;">
<input type="checkbox" value="1">春<br>
<input type="checkbox" value="2">夏<br>
<input type="checkbox" value="2">秋<br>
<input type="checkbox" value="2">冬
</ul>
</body>
</html>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

これでどうでしょう?



---

<html>

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul').css('background-color', '#f00');

$('input').bind('click',function(){
var ul = $(this).parents('ul');
if (ul.find('input:checked').length) {
ul.css('background-color', '#fff');
} else {
ul.css('background-color', '#f00');
}
});
});
</script>

<style>
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 1em;
margin-bottom: 3em;
list-style-type: none;
}
</style>

</head>

<body>

□名前
<ul>
<li><label><input type="checkbox" value="1">一郎</label></li>
<li><label><input type="checkbox" value="2">二郎</label></li>
<li><label><input type="checkbox" value="3">三郎</label></li>
</ul>

□季節
<ul>
<li><label><input type="checkbox" value="1">春</label></li>
<li><label><input type="checkbox" value="2">夏</label></li>
<li><label><input type="checkbox" value="2">秋</label></li>
<li><label><input type="checkbox" value="2">冬</label></li>
</ul>

</body>

</html>

この回答への補足

kaorineさんありがとうございます。

まだjQueryを始めたばかりなのでとっても勉強になります。

F5ボタンを押してもそのままの状態を保つためにはどのような記述をすればよいでしょうか。

難しいです・・・

補足日時:2009/05/20 18:55
    • good
    • 0

クッキーを使ってチェックボックスの状態を保存することでしょうか。


jQuery.cookie.js を使います。(参考URL)

---

<html>

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
var colors = {
checked : '#fff',
unchecked : '#f00'
}

$('ul').css('background-color', colors.unchecked);

$('input').each(function(){
if ($.cookie(this.id) == 'true') {
this.checked = 'checked';
$(this).parents('ul').css('background-color', colors.checked);
}
});

$('input').bind('click',function(){
$.cookie(this.id, this.checked);
var ul = $(this).parents('ul');
if (ul.find('input:checked').length) {
ul.css('background-color', colors.checked);
} else {
ul.css('background-color', colors.unchecked);
}
});
});
</script>

<style>
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 1em;
margin-bottom: 3em;
list-style-type: none;
}
</style>

</head>

<body>

□名前
<ul>
<li><label for="ichiro"><input type="checkbox" value="1" id="ichiro"/>一郎</label></li>
<li><label for="jiro"><input type="checkbox" value="2" id="jiro"/>二郎</label></li>
<li><label for="saburo"><input type="checkbox" value="3" id="saburo"/>三郎</label></li>
</ul>

□季節
<ul>
<li><label for="haru"><input type="checkbox" value="1" id="haru"/>春</label></li>
<li><label for="natsu"><input type="checkbox" value="2" id="natsu"/>夏</label></li>
<li><label for="aki"><input type="checkbox" value="2" id="aki"/>秋</label></li>
<li><label for="huyu"><input type="checkbox" value="2" id="huyu"/>冬</label></li>
</ul>

</body>

</html>

参考URL:http://plugins.jquery.com/project/cookie
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング