jQuery操作checkbox选择
封面图
•
2025-10-26
•
jQuery
210
0
0
0
在 jQuery 中操作 checkbox(复选框)的选择状态,可以通过 `.prop()` 或 `.attr()` 方法来实现。下面是一些常见的操作示例: --- ## 1. **获取 checkbox 是否被选中** ```javascript if ($('#myCheckbox').is(':checked')) { console.log('复选框被选中'); } else { console.log('复选框未被选中'); } ``` 或者使用 `.prop()`: ```javascript if ($('#myCheckbox').prop('checked')) { console.log('复选框被选中'); } ``` --- ## 2. **设置 checkbox 为选中状态** ```javascript $('#myCheckbox').prop('checked', true); ``` --- ## 3. **设置 checkbox 为未选中状态** ```javascript $('#myCheckbox').prop('checked', false); ``` --- ## 4. **切换 checkbox 的状态(选中/未选中)** ```javascript $('#myCheckbox').prop('checked', !$('#myCheckbox').prop('checked')); ``` --- ## 5. **根据条件控制 checkbox 状态** ```javascript if (someCondition) { $('#myCheckbox').prop('checked', true); } else { $('#myCheckbox').prop('checked', false); } ``` --- ## 6. **批量操作多个 checkbox** 例如:全选/取消全选 ```html <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" class="item" value="1"> 选项1 <input type="checkbox" class="item" value="2"> 选项2 <input type="checkbox" class="item" value="3"> 选项3 ``` ```javascript $('#selectAll').click(function() { $('.item').prop('checked', $(this).prop('checked')); }); ``` --- ## 7. **获取所有选中的 checkbox 值** ```javascript var selectedValues = []; $('.item:checked').each(function() { selectedValues.push($(this).val()); }); console.log(selectedValues); // 输出选中的值数组 ``` --- ## 注意事项: - 使用 `.prop()` 而不是 `.attr()` 来设置或获取 `checked` 属性,因为 `.prop()` 更适合处理 DOM 属性。 - 如果你使用的是旧版本的 jQuery(< 1.6),可以使用 `.attr()`,但推荐使用 `.prop()`。 --- 如果你有具体的场景(比如根据某个条件选中多个 checkbox、动态生成 checkbox 等),欢迎告诉我,我可以提供更详细的代码示例!
上一篇:
JQuery输入框中输入内容改变事件
下一篇:
jQuery.parseHTML()
标题录入,一次不能超过6条
返回顶部
留言
留言
评论