当前位置:首页 > jquery

jquery复选框

2026-01-15 15:46:08jquery

jQuery 复选框操作

使用 jQuery 操作复选框(checkbox)可以实现选中、取消选中、获取状态等功能。以下是常见的操作方法:

选中复选框

通过设置 checked 属性为 true 可以选中复选框。

$('#checkboxId').prop('checked', true);

取消选中复选框

通过设置 checked 属性为 false 可以取消选中复选框。

$('#checkboxId').prop('checked', false);

获取复选框状态

使用 prop('checked') 可以获取复选框的选中状态,返回值为布尔值。

var isChecked = $('#checkboxId').prop('checked');
if (isChecked) {
    console.log('复选框已选中');
} else {
    console.log('复选框未选中');
}

切换复选框状态

通过 click() 方法可以切换复选框的选中状态。

$('#checkboxId').click();

监听复选框变化事件

使用 change 事件可以监听复选框状态的变化。

$('#checkboxId').change(function() {
    if ($(this).prop('checked')) {
        console.log('复选框被选中');
    } else {
        console.log('复选框被取消选中');
    }
});

选中一组复选框

通过选择器选中多个复选框并设置 checked 属性。

$('input[type="checkbox"]').prop('checked', true);

取消选中一组复选框

通过选择器取消选中多个复选框。

$('input[type="checkbox"]').prop('checked', false);

获取选中的复选框值

遍历选中的复选框并获取其值。

$('input[type="checkbox"]:checked').each(function() {
    console.log($(this).val());
});

禁用复选框

通过设置 disabled 属性可以禁用复选框。

$('#checkboxId').prop('disabled', true);

启用复选框

通过移除 disabled 属性可以启用复选框。

$('#checkboxId').prop('disabled', false);

注意事项

  • 使用 prop() 方法操作 checkeddisabled 属性,而不是 attr(),因为 prop() 更适用于布尔属性。
  • 事件监听建议使用 change 而非 click,以确保兼容性和准确性。

以上方法涵盖了 jQuery 操作复选框的常见需求,可根据实际场景选择合适的方式。

jquery复选框

标签: 复选框jquery
分享给朋友:

相关文章

jquery实现vue

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具,jQuery 以 DOM 操作和事件驱动为核心,而 Vue.js 是数据驱动的现代化框架。如果想用 jQuery 实现类似 Vue 的功能(如…

jquery下载

jquery下载

jQuery下载方法 官方下载渠道 访问jQuery官网(https://jquery.com/),点击页面中的“Download”按钮。提供两个版本选择: Production版本:压缩后的精…

jquery 菜鸟

jquery 菜鸟

jQuery 入门指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下内容适合初学者快速上手。 引入 jQuery…

jquery最新版本

jquery最新版本

jQuery 最新版本 jQuery 是一个广泛使用的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是关于其最新版本的信息: 当前稳定版本 jQue…

jquery怎么读

jquery怎么读

jQuery的发音 jQuery的正确发音为 "jay-query"(/ˈdʒeɪkwɪəri/)。其中: "jay" 发字母 "J" 的音(如英文单词 "jump" 的首音)。 "query"…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心资源和使用方法整理: jQuery 官方文档 jQuery 官方文档是学习和使用 jQuery 最权威的资源,包含详细的 API 说明、示例和更新日志。…