HTML 初学->input 复选框实现单选模式,同时check

2019-08-06  本文已影响0人  KYM1988

    初学对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>

上一篇 下一篇

猜你喜欢

热点阅读