当前位置:首页 > 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:压缩版(mini…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery属性

jquery属性

jQuery 属性操作 jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以用于获取、设置、修改或删除元素的属性。 获取属性值 使用 attr() 方法可以获取指定属性的值。例如,…

jquery代码

jquery代码

以下是关于jQuery代码的常见用法和示例,涵盖基础操作、事件处理、DOM操作等核心功能: 基础语法 jQuery通过$()函数选择元素,支持CSS选择器语法: // 选择所有<p>元…

jquery删除

jquery删除

jQuery 删除元素的方法 使用 jQuery 删除 DOM 元素有多种方式,可以根据需求选择合适的方法。 remove() 方法remove() 方法会删除选中的元素及其子元素,同时移除元素上的…

jquery 字符串

jquery 字符串

jQuery 字符串操作 jQuery 提供了多种方法来处理字符串,尽管原生 JavaScript 已经具备强大的字符串处理能力,但结合 jQuery 可以更方便地操作 DOM 元素中的字符串内容。…