todo

by opoe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">
<div id="togglecontainer">
<input type="checkbox" id="checkbox'+(counter)+'"class="item"/>
<label for="checkbox"></label>
<input value="make me bold" type="text" class="inputfield"/>
</div>

CSS

.inputfield{
padding-left: 20px;


}
label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}

input[type=checkbox]:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}

input[type=checkbox] {

}

.complete { 
font-weight: bold;
}

input[type=text] {
background-color:transparent;
border: 0px solid;
margin-left: 20px;
color:#222222;
font-style:oblique;
font-size: 13px;
}

JavaScript

$("#togglecontainer").delegate("input[type=checkbox]", "change", function () {
        $(this).nextAll().toggleClass("complete");
    });