使用jQuery的互斥表单字段

Question

I want to have some form fields mutually exclusive.It is a payment form with a lot of different categories. Researching I got the code below

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

This code assumes I could just wrap a div with Id zero-out on the fields I want to be exclusive - that is for those grouped fields only one can have a value. But I have about 4 different field groups. For example one group has textfield and textfield3. Another group has textfield2, textfield4 andtextfield7. Another group has textfield5,textfield6 and textfield8. These fields are not arranged in order(they are arranged in two columns and arranged in some order of convenience) so it is not easy to just wrap a div around a group. Each textfield already has an onkeyup="javascript:PaySum() function to add up input values.

I need help to get an elegant way to achieve this goal.

Answer 1

I would give each grouping of mutually exclusive inputs some attribute (data-grouping=1, data-grouping=2, etc for example) and then update the code you have above to something like:

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

Depending on your page size and usage, blur might be a better event than keydown, and you may be able to further restrict inputs to only those within a particular parent.