JS中input标签和checked使用

本文详细介绍了HTML中<input type="checkbox">和<input type="radio">的checked属性。解释了如何通过checked属性来设定复选框和单选按钮的默认选中状态,并提供了在HTML标签内直接定义和使用JavaScript动态设置的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

checked 是<input type="checkbox"> 和<input type="radio">的一种属性,表示该项是不是被选择了
两种定义方式:
一、在input标签中定义
<input type="checkbox" checked=true>表示该项被选择
<input type="checkbox" >表示该项不被选择,注意:如果是不被选择就不用写checked属性了。如果你写了,不管checked的值是什么,都是被选择。原因:html是一种宽松的标记语言,会忽略你的checked=false中的false,所以结果还是被选中
二、在加载的javascript中设置
你上面的代码就是在加载的javascript中设置
objs[i].checked=true的意思就是该input元素的checked的值是true,就是该input被选中
objs[i].checked=false的意思就是该input元素的checked的值是false,就是该input不被选中
你那个既然把所有的input元素都遍历了一遍,然后又都给了true值,也就是全选了

<think>我们正在回答用户关于HTML input标签用法的问题。根据引用内容,input标签有多种type属性,每种类型有不同的用途。 首先,我们将按照类型分类介绍,然后给出一些使用示例。 注意:在回答中,我们将使用行内数学表达式(如果需要)独立公式(如果需要)的格式,但这个问题主要涉及HTML标签,可能不太需要数学公式。不过,如果有涉及,我们会按照要求处理。 另外,我们将生成相关问题。 步骤: 1. 介绍input标签的基本概念。 2. 按照type属性值分类介绍,包括:text, password, button, checkbox, radio, submit, file, hidden, image, reset等。 3. 对于每种类型,给出简单的示例代码(使用Markdown代码块)。 4. 介绍一些常用属性(如formaction等)。 5. 生成相关问题。 注意:引用内容已经给出,我们在回答中会适当引用。 开始回答:</think>### HTML input 标签用法详解 `<input>` 是 HTML 表单中最核心的元素,通过 `type` 属性定义多种输入控件。以下是主要类型及用法: #### 基础输入类型 1. **文本输入** ```html <input type="text" placeholder="请输入用户名"> ``` - 默认类型,用于单行文本输入 - `placeholder` 属性显示提示文本 2. **密码输入** ```html <input type="password" placeholder="密码"> ``` - 输入内容显示为掩码(`•` 或 `*`) - 移动端可能短暂显示最后输入的字符[^1] 3. **单选按钮 (Radio)** ```html <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 ``` - `name` 相同的单选按钮互斥 - `value` 定义提交到服务器的值 4. **复选框 (Checkbox)** ```html <input type="checkbox" id="news" checked> <label for="news">订阅新闻</label> ``` - `checked` 属性设置默认选中 - 需配合 `<label>` 提升可访问性 #### 功能按钮类型 5. **提交按钮 (Submit)** ```html <input type="submit" value="登录"> ``` - 点击后提交表单数据到服务器 - 可通过 `formaction` 覆盖表单的默认提交地址[^2]: ```html <input type="submit" formaction="/alternative-url"> ``` 6. **重置按钮 (Reset)** ```html <input type="reset" value="清空"> ``` - 重置表单至初始状态(慎用,易误操作)[^1] 7. **普通按钮 (Button)** ```html <input type="button" value="点击" onclick="alert('触发')"> ``` - 需配合 JavaScript 实现功能 - 现代开发更推荐用 `<button>` 元素 #### 特殊类型 8. **文件上传 (File)** ```html <input type="file" accept=".jpg,.png"> ``` - `accept` 限制文件类型(如 `image/*` 或 `.pdf`) 9. **隐藏字段 (Hidden)** ```html <input type="hidden" name="user_id" value="123"> ``` - 不可见但会随表单提交 - 常用于存储会话 ID 等数据 10. **图像按钮 (Image)** ```html <input type="image" src="submit-icon.png" alt="提交"> ``` - 用图片替代提交按钮 - 点击时提交鼠标点击坐标[^2] #### 关键通用属性 | 属性 | 作用 | 示例 | |--------------|-----------------------------|--------------------------| | `required` | 强制必填项 | `<input type="text" required>` | | `disabled` | 禁用输入 | `<input type="text" disabled>` | | `pattern` | 正则验证(如手机号) | `pattern="[0-9]{11}"` | | `autofocus` | 页面加载时自动聚焦 | `<input autofocus>` | ```html 综合示例 <form action="/submit"> 用户名: <input type="text" name="username" required><br> 密码: <input type="password" name="pwd"><br> 记住我: <input type="checkbox" name="remember"><br> 头像: <input type="file" accept="image/*"><br> <input type="hidden" name="token" value="abc123"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值