html单选框复选框怎么用

html-css014

html单选框复选框怎么用,第1张

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input type="radio/checkbox" value="值"name="名称" checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

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