🌟table获取checkbox是否选中的几种方法🌟

2025-03-20 18:15:59
导读 在前端开发中,`` 结合 `` 的场景屡见不鲜。如何准确获取 checkbox 是否被选中呢?以下是几种实用方法,快来学习吧!💪第一招:传统DO...

在前端开发中,`

` 结合 `` 的场景屡见不鲜。如何准确获取 checkbox 是否被选中呢?以下是几种实用方法,快来学习吧!💪

第一招:传统DOM操作

通过 `document.querySelectorAll()` 获取所有 checkbox 元素,再利用 `.forEach()` 遍历检查其 `checked` 属性。例如:

```javascript

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(checkbox => {

if (checkbox.checked) {

console.log('选中了!');

}

});

```

第二招:jQuery 简洁写法

如果你喜欢 jQuery,可以使用 `.filter()` 方法快速筛选出选中的 checkbox:

```javascript

$('input[type="checkbox"]').filter(':checked').each(function() {

console.log($(this).val() + ' 被选中了!');

});

```

第三招:现代框架绑定

若你用 Vue 或 React,可以直接监听状态变化。例如 Vue 中:

```vue

{{ isChecked ? '已选中' : '未选中' }}

```

无论哪种方式,都能轻松搞定 checkbox 的状态检测!🚀 挑战一下,试试这三种方法吧!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。