使用jquery获取具有不同名称的表单输入的数量答案

【问题标题】：Get the number of form inputs with different names using jquery使用jquery获取具有不同名称的表单输入的数量
【发布时间】：2020-03-24 14:42:55
【问题描述】：

如何使用jquery 获取表单中的输入数量，以便将具有不同名称的每个组视为一个项目？例如，对于下面的表格，我们必须得到 4：

<form>
    <input type="text" name="textField">
    <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

我已经尝试过这种方法，并且正在寻找一种不同的、也许更优化的方法：

const fieldsName = [];
$('form :input').each(function(index, item) {
  fieldsName.push(item.name)
});

let uniqueFieldsName = [];

$.each(fieldsName, function(index, item) {
  if ($.inArray(item, uniqueFieldsName) === -1) {
    uniqueFieldsName.push(item);
  }
});

let itemsCount = uniqueFieldsName.length;
console.log(itemsCount);

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<form>
  <input type="text" name="textField">
  <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

【问题讨论】：

你试过什么？
@j08691 我在问题中添加了我尝试过的内容。我一直在寻找一种不同的、或许更乐观的方式。

标签： javascript jquery html forms input

【解决方案1】：

你可以使用：

const names = $('[name]').map(function() {return this.name;});
const distinct = [...new Set(names)];
console.log(distinct.length);

演示：

const names = $('[name]').map(function() {return this.name;});
const distinct = [...new Set(names)]
console.log(distinct.length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="text" name="textField">
    <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

说明：

$('[name]') - 获取所有具有 name 属性的元素。
.map(function() {return this.name;}); - 使用 .map() 方法从上面找到的所有元素中返回一个新的名称数组。
[...new Set(names)] - 从上面的数组中获取不同的名称。
distinct.length 返回具有不同名称的表单输入的数量

【讨论】：

【解决方案2】：

您可以使用以下给定的方法：

function getRadioValue(id) {
    var ele = document.getElementsByName(id);
    for (i = 0; i < ele.length; i++) {
        if (ele[i].checked)
            return ele[i].value;
    }
    return ""
}

var formABO = getRadioValue("radioField"); // Value here

【讨论】：