当前位置:首页 > 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 属性可以启用复选框。

jquery复选框

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

注意事项

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

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

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

相关文章

jquery选择

jquery选择

jQuery选择器基础 jQuery选择器基于CSS选择器语法,用于快速定位和操作DOM元素。通过$()或jQuery()函数传入选择器字符串实现。 常见选择器类型: 元素选择器:$("p") 选…

jquery属性

jquery属性

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

jquery数组

jquery数组

jQuery 数组操作 jQuery 提供了多种方法来操作数组或类数组对象(如 jQuery 对象集合)。以下是常见的数组操作方法: 遍历数组 使用 $.each() 方法可以遍历数组或对象: v…

jquery效果

jquery效果

jQuery 动画效果 jQuery 提供了多种内置动画效果,可用于实现平滑的页面交互。常用的方法包括 show()、hide()、toggle()、fadeIn()、fadeOut()、slideU…

jquery时间

jquery时间

jQuery 时间处理 jQuery 本身不提供专门的时间处理函数,但可以通过 JavaScript 的 Date 对象结合 jQuery 的事件和方法来实现时间操作。以下是常见的时间处理需求及实现方…

jquery样式

jquery样式

jQuery 样式操作基础 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加/移除类名等。以下是常见的样式操作方法: 修改 CSS 属性 使用 css()…