<!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>
1、首先在新建的静态页面插入这个文件，如下图所示。
2、然后在<div></div>标签内插入三个单选按钮，并且有对应的label，如下图所示。
3、接着给第一个单选按钮添加checked属性，默认是被选中，如下图所示。
4、保存代码并在浏览器中预览效果，可以发现单选按钮三个可以同时选中，如下图所示。
5、接着给三个单选按钮添加name属性，并且name属性值都是一样的，如下图所示。
6、最后在jquery初始化函数内，添加选中单选按钮的方法，就完成了。
