クリックするとクラス名を変更、書き換えします。

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;
}