html
<tr>
<td>
<input type="checkbox" value="1" name="newslist" id="newslist-2" />
</td>
<td>
<a href="javascript:;">
<div class="mui-tabel-left">
<div class="mui-tabel-left-img">
<img src="img/lately-1.jpg" alt="">
<span>待考试40%</span>
</div>
</div>
<div class="mui-tabel-right">
<h5>社区矫正法</h5>
<p class="mui-tabel-txt">成为情绪的主人,制好情绪,才能控制好</p>
<div class="mui-tabel-time">
<div class="mui-tabel-time-icon">
<span class="iconfont icon-shijian"></span><em class="start-time">16H</em><i>10课时</i>
</div>
<div class="mui-tabel-bottom-time">
<ul>
<li>标签一</li>
<li>标签一</li>
<li>标签一</li>
</ul>
</div>
</div>
</div>
</a>
</td>
</tr>
css
.mui-myCalss-content-tab-content-item input[type="checkbox"]{
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #e1e1e1;
}
JQ
var checkboxs = $("input[type='checkbox']");//or
checkboxs.click(function () {
if ($(this).prop("checked")) {
$(this).attr("checked",true);
$(this).css({
"backgroundImage":"url(img/input-1.png)",
"backgroundRepeat":"no-repeat",
"backgroundSize":"20px 20px",
"border":"0 none"
})
} else {
$(this).attr("checked",false);
$(this).css({
"background":"#fff",
"border":"1px solid #e1e1e1"
})
}
});
效果图