<!DOCTYPEhtml>
<html>
label{
height : 20px
background : chartreuse
float : none
}
input[ type ="checkbox"]{
width :20px
height :20px
display : inline-block
text-align : center
vertical-align : middle
line-height : 18px
position : relative}
/*未选中的状态*/
input[ type ="checkbox"]::before{
content : ""
position : absolute
top :0
left : 0
background : #fff
width : 100%
height : 100%
border : 1px solid #d9d9d9}
/*选中的状态*/
input[ type ="checkbox"]:checked::before{
content : "\2713"background-color : #fff // \2713 点击到特殊符号表
position : absolutetop : 0left : 0width :100%
border : 1px solid #e50232
color :#e50232
font-size : 20pxfont-weight : bold}
</style>
// 使用需要导入<script language="JavaScript"src="js/ jquery.js（点击进入链接) "></script>
$(":checkbox").click( function (){
$( this ). attr ("checked",true)//设置当前选中checkbox的状态为checked
$( this ).siblings(). attr ("checked",false)//设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
})
function chang( id ){
var idc= '#'+id
//获取是否选中
var isChecked= $(idc).is(":checked")
// 发送到交互的数据
window .webkit.messageHandlers.jsToOcWithPrams.postMessage({"paramid":id,"paramflag":isChecked})
}
</html>
如何用css修改checkbox的原本样式，这里分享下操作方法。
设备：联想电脑
系统：win8
软件：HBuilder代码编辑器
1、首先在电脑中打开编辑器，创建基本的html代码。
2、然后设置一下背景。
3、接着隐藏掉原来的checkbox。
4、最后覆盖一下原本的位置，利用伪元素这个时候点击就会有效果了。
1、首先用hbuilder编辑器新建一个html文件，里面设置一个input框并设置它的tpye属性为checkbox，设置name属性为checkbox，同时在上方设置一个bgred的样式备用：
2、然后在下方引入Jquery库，首先获取checkbox的dom元素，给它一个点击事件，然后判断checkbox有没有被选中，如果选中就添加上一步设置好的css样式，否则则删除样式：
3、最后来到浏览器，可以看到一个checkbox框，点击将它选中：
4、点击之后checkbox的颜色就改变了：
