- ベストアンサー
jQueryを使ってスタイルの変更
- jQueryを使用して、名前と季節の選択肢が選択された場合に、背景色を白に変更する方法を教えてください。
- HTMLの名前と季節の選択肢に対して、jQueryを使用して背景色を白に変更する方法について教えてください。
- jQueryを使って、名前と季節の選択肢が選択された場合に、背景を白くする方法を教えてください。
- kyouju
- お礼率45% (24/53)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （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>
その他の回答 (1)
クッキーを使ってチェックボックスの状態を保存することでしょうか。 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>
補足
kaorineさんありがとうございます。 まだjQueryを始めたばかりなのでとっても勉強になります。 F5ボタンを押してもそのままの状態を保つためにはどのような記述をすればよいでしょうか。 難しいです・・・