JavaScript+jQuery 在表格中有复选框以及input文本,如何获取勾选的复选框中的input文本
时间: 2024-02-24 11:56:07 浏览: 148
你可以使用 jQuery 的选择器来获取勾选的复选框中的 input 文本。以下是示例代码:
```javascript
// 假设你的复选框有一个 class 名称为 checkbox,input 文本有一个 class 名称为 inputText
var selectedInputs = [];
$('.checkbox:checked').each(function() {
var inputText = $(this).closest('tr').find('.inputText').val();
selectedInputs.push(inputText);
});
console.log(selectedInputs);
```
这段代码会遍历所有选中的复选框,并获取它们所在行的 input 文本的值,将这些值存储在一个数组中。你可以根据需要进行进一步的处理。
相关问题
JavaScript+jQuery获取表格复选框勾选行的值
您可以使用以下代码来获取表格中被勾选的复选框对应的行的值:
```javascript
var selectedRows = [];
$('table input[type="checkbox"]:checked').each(function() {
var row = $(this).closest('tr');
var rowData = {
//根据表格的列数,设置对应的属性名
'column1': row.find('td:eq(0)').text(),
'column2': row.find('td:eq(1)').text(),
'column3': row.find('td:eq(2)').text()
};
selectedRows.push(rowData);
});
```
这段代码会查找表格中被勾选的复选框,然后获取对应的行的值,并将这些值存储在一个数组中。您需要根据实际情况修改代码中的选择器和属性名。
jquery datatable 第一列复选框
### 如何在 jQuery DataTable 中设置第一列作为复选框
为了实现在 jQuery DataTable 的第一列显示复选框并允许用户进行多选操作,可以按照如下方法配置:
#### 初始化 DataTable 并定义复选框列
通过 `columns` 参数来指定每一列的内容,在这里特别针对第一列设置了自定义渲染器用于创建复选框。
```javascript
$(document).ready(function() {
var table = $('#example').DataTable({
"columnDefs": [
// 禁用第一列排序功能
{ "orderable": false, "targets": 0 }
],
"columns": [
// 定义第一列为复选框
{
"data": null,
"defaultContent": "<input type='checkbox' class='select-checkbox'>",
"className": 'dt-body-center',
"title": ""
},
// 后续其他数据列...
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
});
```
上述代码片段中,对于第一列使用了 `"data": null` 和 `"defaultContent"` 来插入 HTML 输入控件 `<input>` 标签表示复选框[^4]。同时禁用了该列的排序能力以防止影响用户体验[^2]。
#### 获取被勾选行的信息
当需要处理这些已被选择的记录时,可以通过遍历所有带有特定类名 `.select-checkbox:checked` 的元素找到哪些行已经被标记,并进一步提取所需信息。
```javascript
function getSelectedRowsData(){
var selectedData = [];
$.each($('#example tbody input[type="checkbox"]:checked'), function(index, element){
var row = $(element).closest('tr');
var rowData = table.row(row).data();
selectedData.push(rowData);
});
console.log(selectedData); // 输出所选中的行对应的数据对象数组
}
```
此函数会收集所有处于选中状态下的复选框所在的那一整行的相关联数据,并将其存储在一个新的列表里供后续逻辑调用[^1]。
阅读全文