当前位置:首页 > 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() 方法可以切换复选框的选中状态。

jquery复选框

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

监听复选框变化事件

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

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

选中一组复选框

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

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

取消选中一组复选框

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

jquery复选框

$('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下载

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

jquery官网

jquery官网

jQuery 官网信息 jQuery 的官方网站是 jQuery.com,提供最新的 jQuery 版本下载、文档、教程和插件资源。 官网主要功能 下载 jQuery:提供压缩版(minifi…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

jquery怎么读

jquery怎么读

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

jquery版本

jquery版本

jQuery是一个快速、简洁的JavaScript库,用于简化HTML文档遍历、事件处理、动画设计和Ajax交互。以下是关于jQuery版本的详细信息: jQuery版本分类 jQuery主要分为三…

jquery之家

jquery之家

jQuery之家相关资源 jQuery之家是一个提供jQuery插件、教程和资源的网站,适合开发者学习和使用jQuery技术。以下是关于jQuery之家的主要内容和资源: 网站内容 提供丰富的…