【问题标题】:How can I edit checkout page with javascript?如何使用 javascript 编辑结帐页面?
【发布时间】:2022-01-11 13:59:12
【问题描述】:

我正在尝试在选择单选按钮时使结帐页面成为更改字段。 所以我在单选按钮选项 A 和 B 上有 2 个选项 When A is selected I want 2 fields below to remain available and other 2 to disappear. 检查第二单选按钮时的另一种方式。

我在这个网站上主要使用 Wordpress,但我需要一些代码来实现这个功能。

function yesnoCheck('radio-5984531736') {
    if (this.radio-5984531736 == "Persoana fizica") {
        alert("check");
        document.getElementByClassName("juridica").style.display = "block";
    } else {
        document.getElementByClassName("fizica").style.display = "none";
    }
}

我在标题中有此代码作为脚本。我不确定它是否不正确,或者我没有调用此函数的代码。 Id 和类名如下:

单选按钮 ID:radio-5984531736 选择类名时应显示的信息:fizica 选择类名时应显示的信息:法律

【问题讨论】:

标签: javascript html css wordpress web


【解决方案1】:

我已经做了一个类似于你的任务的演示:

function yesnoCheck() {
  var value = document.querySelector("[name='radio-5984531736']:checked").value;

  if (value === "v1") {
    document.querySelector(".fizica").style.display = "block";
    document.querySelector(".juridica").style.display = "none";
  } else {
    document.querySelector(".fizica").style.display = "none";
    document.querySelector(".juridica").style.display = "block";
  }
}

var form = document.querySelector("#formId");
form.addEventListener("change", yesnoCheck);
<div>
  <form id="formId">
    <div>
      <input type="radio" name="radio-5984531736" value="v1" id="v1id">
      <label for="v1id">Persona fizica</label>
      <input type="radio" name="radio-5984531736" value="v2" id="v2id">
      <label for="v2id">Persona juridica</label>
    </div>
    <div class="fizica">
      Prenume
      <input name="prenume"><br/> Nume companie
      <input name="numecom">
    </div>

    <div class="juridica">
      Nume
      <input name="nume"><br/> CUI
      <input name="cui">
  </form>
  </div>

虽然我认为在你的情况下它可以更简单。例如。尝试写this['radio-5984531736'] 而不是this.radio-5984531736。此外,function yesnoCheck() { ... 中不需要“radio-5984531736”。

【讨论】:

  • 非常感谢!
猜你喜欢
  • 2020-08-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-19
  • 2012-04-06
  • 1970-01-01
相关资源
最近更新 更多