Jquery 获取Checkbox值,prop 和 attr 函数区别
封面图
•
2025-12-22
•
jQuery
260
0
0
0
在 jQuery 中,`prop()` 和 `attr()` 都可以用来获取或设置 HTML 元素的属性,但在处理 **checkbox**(复选框)这类元素时,它们的行为有显著区别。 --- ## ✅ 一、`prop()` 和 `attr()` 的基本区别 | 方法 | 作用 | 是否反映当前状态 | 是否推荐用于表单控件 | |------|------|------------------|------------------------| | `.prop()` | 获取或设置 DOM 属性(如 `checked`, `disabled` 等) | ✅ 是 | ✅ 推荐 | | `.attr()` | 获取或设置 HTML 属性(如 `checked="checked"`) | ❌ 否(只读 HTML 属性值) | ❌ 不推荐 | --- ## ✅ 二、对于 Checkbox 的具体区别 ### 1. 使用 `prop('checked')` ```javascript var isChecked = $('input[type="checkbox"]').prop('checked'); ``` - **作用**:获取 checkbox 当前是否被选中(`true` 或 `false`)。 - **推荐方式**:这是获取 checkbox 值的标准方法。 - **示例**: ```html <input type="checkbox" id="myCheckbox" checked> ``` ```javascript $('#myCheckbox').prop('checked'); // true ``` --- ### 2. 使用 `attr('checked')` ```javascript var isChecked = $('input[type="checkbox"]').attr('checked'); ``` - **作用**:获取 HTML 中的 `checked` 属性值(通常是 `"checked"` 字符串)。 - **问题**:它不会反映 checkbox 的实际状态(比如用户点击后改变的状态)。 - **示例**: ```html <input type="checkbox" id="myCheckbox" checked> ``` ```javascript $('#myCheckbox').attr('checked'); // "checked" ``` 如果用户手动取消勾选,这个值还是 `"checked"`,所以不能准确反映当前状态。 --- ## ✅ 三、总结对比 | 方法 | 获取 checkbox 值 | 是否反映真实状态 | 用途 | |------|------------------|------------------|------| | `.prop('checked')` | ✅ `true` / `false` | ✅ 是 | 推荐,用于判断是否选中 | | `.attr('checked')` | ❌ `"checked"` 或 `undefined` | ❌ 否 | 不推荐用于判断状态 | --- ## ✅ 四、如何获取 checkbox 的值? 如果你只是想获取 checkbox 是否被选中: ```javascript if ($('#myCheckbox').prop('checked')) { alert('选中了'); } else { alert('未选中'); } ``` 如果你想获取 checkbox 的值(即 `value` 属性): ```javascript var value = $('#myCheckbox').val(); ``` --- ## ✅ 五、设置 checkbox 状态 ### 设置为选中: ```javascript $('#myCheckbox').prop('checked', true); ``` ### 设置为不选中: ```javascript $('#myCheckbox').prop('checked', false); ``` --- ## ✅ 六、小结 - 对于 **checkbox** 的状态(是否选中),**优先使用 `prop('checked')`**。 - `attr('checked')` 只能获取 HTML 中的原始属性值,不能反映运行时状态。 - `prop()` 更接近 DOM 实际状态,是现代 jQuery 推荐的方式。 如有更多关于 jQuery 表单操作的问题,欢迎继续提问!
上一篇:
JQuery实现点击div以外的位置隐藏该div窗口
下一篇:
jquery 鼠标经过显示该行的编辑和删除链接
标题录入,一次不能超过6条
留言
评论