获取checkbox勾选的id
时间: 2024-05-06 17:15:44 浏览: 48
可以使用以下代码获取勾选的checkbox的id:
```javascript
var selectedIds = [];
$('input[type=checkbox]:checked').each(function() {
selectedIds.push($(this).attr('id'));
});
```
这段代码会遍历所有勾选的checkbox,将它们的id属性值存入一个数组中。你可以根据需要对此数组进行进一步操作。
相关问题
vue勾选获取单行id
要在Vue表格中勾选获取单行id,你可以在表格中添加一个复选框列,并将每行的数据与该复选框绑定。当用户勾选复选框时,你可以将该行数据的id添加到一个选中数据的数组中。以下是一个简单的示例:
1. 在表格模板中添加复选框列并绑定数据id:
```
<template>
<table>
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td><input type="checkbox" v-model="item.checked" :value="item.id" @change="selectItem(item.id)"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
```
2. 在组件中添加选中数据的数组和勾选逻辑:
```
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Alice', age: 20, checked: false },
{ id: 2, name: 'Bob', age: 25, checked: false },
{ id: 3, name: 'Charlie', age: 30, checked: false },
],
selectedIds: [],
};
},
methods: {
selectItem(id) {
if (this.selectedIds.includes(id)) {
this.selectedIds = this.selectedIds.filter((i) => i !== id);
} else {
this.selectedIds.push(id);
}
},
},
};
</script>
```
3. 将勾选逻辑绑定到复选框的`v-model`和`@change`指令:
```
<input type="checkbox" v-model="item.checked" :value="item.id" @change="selectItem(item.id)">
```
现在,每次用户勾选或取消勾选一个复选框时,`selectItem`方法将会更新`selectedIds`数组,其中包含所有被选中的行数据的id。你可以在需要获取单行id的地方使用`selectedIds`数组,例如在点击某个操作按钮时,只操作选中的行数据。
js input checkbox 通过id 获取value
由于 checkbox 元素的 value 属性只在选中时才会被提交,因此可以通过 checked 属性来判断是否选中,并获取对应的 value 值。
以下是一个示例代码:
```html
<input type="checkbox" id="checkbox1" value="value1"> Checkbox 1<br>
<input type="checkbox" id="checkbox2" value="value2"> Checkbox 2<br>
<button onclick="getValue()">Get value</button>
<script>
function getValue() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
if (checkbox1.checked) {
console.log("Checkbox 1 is checked and its value is " + checkbox1.value);
}
if (checkbox2.checked) {
console.log("Checkbox 2 is checked and its value is " + checkbox2.value);
}
}
</script>
```
当用户勾选 Checkbox 1 时,点击 Get value 按钮,控制台输出:
```
Checkbox 1 is checked and its value is value1
```
同样,当用户勾选 Checkbox 2 时,点击 Get value 按钮,控制台输出:
```
Checkbox 2 is checked and its value is value2
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)