使用 jQuery 的互斥表单字段

Question

我想要一些表单域互斥。它是一个有很多不同类别的支付表单。 研究我得到了下面的代码

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

此代码假设我可以在我想要独占的字段上包装一个 ID 为零的 div - 也就是说，对于那些分组的字段，只有一个可以有一个值。但我有大约 4 个不同的字段组。例如，一组有 textfield 和 textfield3。另一组有textfield2、textfield4 和textfield7。另一组有 textfield5、textfield6 和 textfield8。这些字段没有按顺序排列（它们排列在两列中，并按某种方便的顺序排列），因此仅将 div 包裹在组周围并不容易。 每个文本字段已经有一个 onkeyup="javascript:PaySum() 函数来添加输入值。

我需要帮助来获得一个优雅的方式来实现这个目标。

Answer 1

我会给每个互斥输入分组一些属性（例如 data-grouping=1、data-grouping=2 等），然后将上面的代码更新为：

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

根据您的页面大小和使用情况，blur 可能是比 keydown 更好的事件，并且您可以进一步将输入限制为仅限特定父级中的输入。