主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。
<input type="checkbox" name="check-box" /> <span>Pop music</span></p>
<p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Rock music</span></p>
<p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Rap music</span></p>
<p> </li>
<li>
<input type="checkbox" name="check-box" /> <span>Hiphop music</span></p>
<p> </li>
</ul>
</div>
然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div,这个div的classname为check-box和radio-btn。
那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:
上面这段CSS3代码就是用样式来自定义div,让div的样式和checkbox和radiobox一样。
最后我们来模拟点击选中和取消选中,这部分也是用jQuery来实现:
</div>代码如下:</div>