当前位置:首页 > 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怎么读

jquery怎么读

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

jquery 菜鸟

jquery 菜鸟

以下是针对 jQuery 初学者的基础指南,涵盖核心概念和常用操作: jQuery 简介 jQuery 是一个快速、轻量级的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考:包含…

jquery 对话框

jquery 对话框

jQuery 对话框的实现方法 jQuery 对话框通常通过 jQuery UI 库中的 dialog() 方法实现。以下是几种常见的实现方式: 基本对话框实现 引入必要的 jQuery 和…

jquery 插入html

jquery 插入html

jQuery 插入 HTML 的方法 jQuery 提供了多种方法来动态插入 HTML 内容到 DOM 中。以下是几种常用的方法: append() 将内容插入到选定元素的内部末尾。 $(…

jquery获取

jquery获取

获取元素 使用jQuery选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('…