jQuery表单复选框与单选框美化

新建html文档。

书写hmtl代码。

多选：

单选：

已选:

关于选择类型（checkStyle）:

书写css代码。.selectShow { height: 40px; }.selectShow ul { list-style: none; margin: 0px; padding: 0px; }.selectShow ul .cleanItem { border: solid thin #AFCBCF; font-size: 14px; cursor: pointer; background-color: #AFCBCF; width: 100px; }.selectShow ul .cleanItem:hover { background-color: #AFCBBF; }.selectShow ul li { min-width: 100px; text-align: center; float: left; height: 30px; line-height: 30px; }.selectShow ul li i { font-size: 20px; padding: 0px 5px; }.selectShow ul .selectItem { border: solid thin #AFCBCF; font-size: 14px; margin-left: 10px; cursor: pointer; }.selectShow ul .selectItem:hover { border: solid thin #6699FF; }.selectShow ul .selectItem i { float: right; margin-left: 5px; }.selectList { height: 40px; }.selectList ul { list-style: none; margin: 0px; padding: 0px; }.selectList ul li { float: left; margin-left: 10px; line-height: 40px; cursor: pointer; }.selectList ul li i { margin-right: 3px; }.iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.icon-shanchu:before { content: '\e61c'; }.icon-xuanzhong:before { content: '\e64a'; }.icon-CombinedShapeCopy:before { content: '\e604'; }.icon-xuanzhong3:before { content: '\e525'; }.icon-weixuanzhong:before { content: '\e626'; }.icon-xuanzhong1:before { content: '\e617'; }.icon-qingchu:before { content: '\e630'; }.icon-weixuanzhong1:before { content: '\e602'; }

书写并添加js代码。

书写multiselect.jsjs代码。

代码整体结构。