jqueryのremoveClassとaddClassで、クリックされる度にclass名を判別して、class名を書き換えします。
【check.jsの説明】
リストの項目".mod_checklist ul li"をクリックする度に、リストのクラスclass="check"をclass="checked"に変更します。
classを変更することで、CSSの背景画像を○から×に変更しています。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="check.js"></script>
[check.js]JavaScript
//チェック $(function(){ $(".mod_checklist ul li").click(function(){ if($(this).attr("class")=="check"){ $(this).removeClass("check").addClass("checked");}else{ $(this).removeClass("checked").addClass("check");} }); });
HTMl
<div class="mod_checklist"> <ul> <li class="check">睡眠時間は8時間とった</li> <li class="check">タバコをすう</li> <li class="check">毎日お酒を飲む</li> <li class="check">朝ごはんを食べてきた</li> <li class="check">ストレスを感じる</li> <li class="check">仕事がすき♪</li> </ul> <!--mod_checklist_end--></div>
CSS
/* .mod_checklist -----------------------------------------*/ .mod_checklist ul li{ width:200px; /* リストマーカー画像切れ防止。最低高さを確保 */ min-height:20px; height:auto!important; height:20px; padding:0 0 0 25px; margin:5px 0 0 0; cursor:pointer; } .mod_checklist ul li.check{ background:transparent url('img/maru.gif') no-repeat left 0.1em scroll; } .mod_checklist ul li.checked{ background:transparent url('img/batu.gif') no-repeat left 0.1em scroll; }