主要思路是利用隐藏原来的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>

