jQueryを使ってスタイルの変更

解決済

質問者：kyouju
質問日時：2009/05/20 02:15
回答数：2件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#137826
回答日時：2009/05/20 10:27

これでどうでしょう？

---

<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

通報する

- 0
- 件

通報する

No.2

回答者： noname#137826
回答日時：2009/05/20 21:42

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

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