Взаимоисключающие поля формы с использованием jQuery

Question

Я хочу, чтобы некоторые поля формы были взаимоисключающими. Это форма оплаты с множеством различных категорий. Исследуя, я получил код ниже

$('document').ready( function() {
    $("#zero-out :input").each( function() {
        $(this).keydown( function() {
            $("#zero-out :input").not(this).val("");
        });
    });
});

В этом коде предполагается, что я мог бы просто заключить div с нулем Id в поля, которые я хочу исключить, то есть для этих сгруппированных полей только одно может иметь значение. Но у меня есть около 4 различных групп полей. Например, одна группа имеет текстовое поле и текстовое поле3. У другой группы есть текстовое поле 2, текстовое поле 4 и текстовое поле 7. Другая группа имеет textfield5, textfield6 и textfield8. Эти поля расположены не по порядку (они расположены в два столбца и расположены в некотором удобном порядке), поэтому нелегко просто обернуть элемент div вокруг группы. Каждое текстовое поле уже имеет функцию onkeyup="javascript:PaySum() для добавления входных значений.

Мне нужна помощь, чтобы найти элегантный способ достижения этой цели.

Answer 1

Я бы присвоил каждой группе взаимоисключающих входных данных какой-либо атрибут (например, группировка данных = 1, группировка данных = 2 и т. Д.), А затем обновил бы код, указанный выше, до чего-то вроде:

$('document').ready( function() {
  $("input").each( function() {
    $(this).keydown( function() {
      $("input").not("[data-grouping='" + this.data("grouping") + "']").val("");
    });
  });
});

В зависимости от размера и использования вашей страницы, blur может быть лучшим событием, чем нажатие клавиши, и вы можете дополнительно ограничить входные данные только теми, которые находятся в пределах определенного родителя.