在元素或表单中单击按钮时隐藏/取消隐藏部分

Question

我正在使用表单在 elementor 中创建一个表单，单击它有一个单选按钮，一些字段应该取消隐藏。如何实现？

下面是截图

Answer 1

首先要做的是正确命名 elementor 表单中的 ID。

请将单选按钮的 ID 命名为 same_as_shipping_address。

在内容 -> 选项中请写下：

Same as shipping address|same_as_shipping_address
Ohters options 1|other_option_1 /* You have to write your own option */

Elementor 然后将创建一个具有选择器的输入：

input[name="form_fields[same_as_shipping_address]"]

然后，对于选择单选按钮时要隐藏的所有元素，为它们提供一个 ID，末尾带有 _show_if_same_as_shipping_address。

例如对于电话（如果必须隐藏），ID 将为phone_number_show_if_same_as_shipping_address

Elementor 然后会创建一个 div 并将其作为一个类：

.elementor-field-group-phone_number_show_if_same_as_shipping_address

现在的目标是检查input[name="form_fields[same_as_shipping_address]"] 的每次更改，并显示ID 与_show_if_same_as_shipping_address 类似的字段。

我们将使用 jQuery 脚本来执行此操作。

如果您没有子主题，请创建一个并使用此 jQuery 代码：

jQuery(document).ready(function ($) {
  var radio = $('input[name="form_fields[same_as_shipping_address');
  var toToggle = $("div[class*=_show_if_same_as_shipping_address]");

  /* By default */
  onRadioChange();

  /* Function triggered when the visitor changes the status of the sending address */
  radio.on("change", function (e) {
    onRadioChange();
  });

  /* Action to be carried out */
  function onRadioChange() {
    if (getRadioVal()=== "same_as_shipping_address") {
      toToggle.css('display', 'flex');
    }
    else {
      toToggle.css('display', 'none');
    }
  }

  function getRadioVal() {
    return $('input[name="form_fields[same_as_shipping_address:checked').val();
  }
});