初学对HTML进行了简单的学习以及记录，勿喷，只是记录一个过程，也希望对初学者有点帮助吧.
<!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: absolute;top: 0;left: 0;width:100%;
border: 1px solid #e50232;
color:#e50232;
font-size: 20px;font-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>
网友评论