layui2.8 var form = $('form'); // 获取表单元素 var inputs = form.find(':input'); // 获取表单内所有 input 元素 var visibleInputs = inputs.filter(function() { return $(this).closest(':hidden').length === 0; // 筛选出没有被隐藏的 input 元素 }); var names = visibleInputs.map(function() { return $(this).attr('name'); // 获取所有没有被隐藏的 input 元素的 name 属性值 }).get(); console.log(names); // 输出所有没有被隐藏的 input 元素的 name 属性值获取不到单选框和复选框的name属性

确实，单选框和复选框的name属性值比较特殊，因为它们是一组元素，只有其中一个被选中时才会提交其对应的值。因此，获取这些元素的name属性值需要采用不同的方式。

对于单选框和复选框，可以使用jQuery的`:checked`选择器来筛选出被选中的元素，然后获取其name属性值。例如：

var checkboxes = form.find(':checkbox:checked');
var checkboxNames = checkboxes.map(function() {
  return $(this).attr('name');
}).get();

var radios = form.find(':radio:checked');
var radioNames = radios.map(function() {
  return $(this).attr('name');
}).get();

console.log(checkboxNames);
console.log(radioNames);

这样就可以获取到所有被选中的复选框和单选框的name属性值了。

相关问题

jquery获取表单内父容器没有被display=none隐藏的input,select,radio等的表单name属性值

可以使用以下代码来获取表单内父容器没有被 display=none 隐藏的 input、select、radio 等表单元素的 name 属性值：

var form = $('form'); // 获取表单元素
var inputs = form.find(':input'); // 获取表单内所有 input 元素
var visibleInputs = inputs.filter(function() {
  return $(this).closest(':hidden').length === 0; // 筛选出没有被隐藏的 input 元素
});
var names = visibleInputs.map(function() { 
  return $(this).attr('name'); // 获取所有没有被隐藏的 input 元素的 name 属性值
}).get();

console.log(names); // 输出所有没有被隐藏的 input 元素的 name 属性值

上述代码中，我们首先获取表单元素，然后通过 `:input` 选择器获取表单内所有的 input 元素。接着，我们使用 `filter()` 方法筛选出没有被隐藏的 input 元素。最后，通过 `map()` 方法获取所有没有被隐藏的 input 元素的 name 属性值，并使用 `get()` 方法将其转换为数组。

js tbale 表单收集

### 使用 JavaScript 收集 Table 表单数据

为了实现通过 JavaScript 来收集 HTML 中 `<table>` 元素内的表单数据，可以采用遍历表格中的每一行并读取特定单元格内输入框或其他表单控件的值的方式。下面提供了一个具体的实例来展示这一过程。

#### 示例场景描述
假设有一个简单的订单详情表格，其中包含了商品名称、数量以及单价三个字段作为可编辑项，并且每条记录对应一行。目标是在点击按钮时获取整个表格中所有有效填写的信息[^1]。

#### HTML 结构定义
首先构建基本的HTML结构，这里创建了一张带有若干列用于录入信息的表格：

<form id="orderForm">
  <table border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr>
        <th>商品名</th><th>数量</th><th>价格 (元)</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态添加的内容 -->
    </tbody>
  </table>
  <button type="button" onclick="collectTableData()">提交订单</button>
</form>

此部分利用了`<form>`标签包裹住整个表格以便后续操作；同时设置了一个按钮用来触发收集动作而不是默认提交行为[^2]。

#### 添加新行函数
为了让用户能够增加新的项目，在页面加载完成后初始化一些初始行或者允许他们手动新增行。此处给出一个简单方法向表格主体追加一行的功能：

function addRow() {
  const tbody = document.querySelector('#orderForm > table > tbody');
  
  let row = `
    <tr>
      <td><input name="itemName[]" /></td>
      <td><input name="quantity[]" /></td>
      <td><input name="price[]" /></td>
    </tr>`;
    
  tbody.insertAdjacentHTML('beforeend', row);
}
window.onload = function () {addRow();}; // 页面载入时自动调用一次

这段脚本会在每次被调用的时候往表格底部插入一个新的空白行供用户填入资料。

#### 数据收集逻辑
当按下“提交订单”的时候，则执行如下JavaScript代码片段完成实际的数据提取工作：

function collectTableData(){
  var formData = [];
  $('#orderForm').find('tbody tr').each(function(i, el){
     var $inputs = $(this).find(':input'),
         item={};
         
     $.each($inputs,function(j,inputEl){
       item[inputEl.name]=inputEl.value;
     });
     
     if(Object.keys(item).length !== 0){formData.push(item);}
  });

  console.log(formData); // 输出结果至控制台查看
}

上述代码段实现了对指定范围内所有具有 `name` 属性的 `<input>` 控件进行迭代访问，并将其键值对形式存储在一个对象里再加入数组之中。最终得到的结果是一个由多个对象组成的列表，每个对象代表一条完整的记录。