html中<checkbox>标签用法解析及如何设置checkbox复选框的默认选中状态

html中复选框Checkbox对象代表一个 HTML 表单中的 一个选择框。

 

html中复选框Checkbox对象的属性

属性             描述

accessKey        设置或返回访问 checkbox 的快捷键。

alt              设置或返回不支持 checkbox 时显示的替代文本。

checked          设置或返回 checkbox 是否应被选中。

defaultChecked   返回 checked 属性的默认值。

disabled         设置或返回 checkbox 是否应被禁用。

form             返回对包含 checkbox 的表单的引用。

id               设置或返回 checkbox 的 id。

name             设置或返回 checkbox 的名称。

tabIndex         设置或返回 checkbox 的 tab 键控制次序。

type             返回 checkbox 的表单元素类型。

value            设置或返回 checkbox 的 value 属性的值

 

html中复选框Checkbox的标准属性

属性         描述

className    设置或返回元素的 class 属性。

dir          设置或返回文本的方向。

lang         设置或返回元素的语言代码。

title        设置或返回元素的 title 属性。

 

html中复选框Checkbox 对象的方法

方法          描述

blur()        从 checkbox 上移开焦点。

click()       模拟在 checkbox 中的一次鼠标点击。

focus()       为 checkbox 赋予焦点。

 

html中复选框Checkbox 设置默认选中代码

<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />

注意：checked="checked"表示默认选中状态。

html中复选框Checkbox复选框使用举例

<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
</form>

效果图如下：

html中单选框radio和复选框区别及举例

   HTML的<input>标记中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中的选项用户可以任意选择多项，甚至全选。

 

html中单选框radio和复选框checkbox代码举例

<form name="form1" >
你是否喜欢旅游？请选择：<br>
<input type="radio" name="radiobutton" value="radiobutton" checked> 喜欢
<input type="radio" name="radiobutton" value="radiobutton"> 不喜欢
<input type="radio" name="radiobutton" value="radiobutton"> 无所谓<br>
<br>
您对那些运动感兴趣，请选择：<br>
<input type="checkbox" name="checkbox1" value="checkbox"> 跑步
<input type="checkbox" name="checkbox2" value="checkbox"> 打球
<input type="checkbox" name="checkbox3" value="checkbox"> 登山
<input type="checkbox" name="checkbox4" value="checkbox"> 健美<br>
</form>

效果图如下:

参考文章：https://blog.youkuaiyun.com/u012207345/article/details/78323466