Получите количество входов формы с разными именами, используя jquery

Question

Как получить количество входов в форме, используя 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>

Answer 1

Вы можете использовать:

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

DEMO:

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 возвращает количество входов формы с разными именами

Answer 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