仅使用 css 显示带有输入按钮的元素

Question

我想在选中另一个部分的复选框时显示一个部分，并从顶部显示动画。对于另一部分中的输入，我有以下代码。

<div className="continue" id="first">
  <button className="btn-continue">
                    Contratar Plano
                    <input type="checkbox" id="reveal-email" role="button"/>
                  </button>

</div>

<section className="plan-section" id="plan-section">
  <div className="next">
    <i class="arrow down"></i>
  </div>
  <div className="form-block">
    <form className="form">
      <div className="plan-form">
        <div className="input-block">
          <label htmlFor="name">Nome</label>
          <input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
        </div>

        <div className="continue">
          <button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
                  <span className="btn-text">Contratar Plano</span>
                  <img className="check-btn" src={check} />
                </button>
        </div>
      </div>
    </form>
  </div>
</section>

还显示了我需要显示的部分；这个部分有一个默认的display:none。

Answer 1

这是一个经典的 JS 任务。使用 onclick 事件检查复选框是否被选中，然后将部分从 display: none 更改为 display: block 。还要添加一个onclick事件，以便触发JS。

function showSection() {
  var showSection = document.getElementById("reveal-email"),
      planSection = document.getElementById("plan-section");
  if (showSection.checked == true) {
    planSection.style.display = "block";
  } else {
    planSection.style.display = "none";
  }
}

#plan-section {
  display: none;
}

<div className="continue" id="first">
  <button className="btn-continue">Contratar Plano
    <input type="checkbox" id="reveal-email" onclick="showSection()">
  </button>

</div>

<section className="plan-section" id="plan-section">
  <div className="next">
    <i class="arrow down"></i>
  </div>
  <div className="form-block">
    <form className="form">
      <div className="plan-form">
        <div className="input-block">
          <label htmlFor="name">Nome</label>
          <input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
        </div>

        <div className="continue">
          <button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
                  <span className="btn-text">Contratar Plano</span>
                  <img className="check-btn" src={check} />
                </button>
        </div>
      </div>
    </form>
  </div>
</section>

Answer 2

关于您的代码的一项建议：

<button className="btn-continue">
                    Contratar Plano
    <input type="checkbox" id="reveal-email" role="button"></input>
</button>

将复选框和一些文本分组到按钮中不是一个好习惯，在 HTML 中您可以使用 label。

如果JS方案可以接受，则需要按照以下步骤进行：

1. Find DOM 中的复选框按钮和部分
2. Add事件监听器，每次复选框状态改变后触发回调函数
3. 在回调函数中，您需要为您的部分触发style。

完整代码如下：

var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');

checkbox.addEventListener('change', onChange)

function onChange() {
  if (this.checked) {
    section.style.display = "block";
  } else {
    section.style.display = "none";
  }
}

<div className="continue" id="first">
  <button className="btn-continue">
    Contratar Plano
    <input type="checkbox" id="reveal-email" role="button"/>
  </button>
</div>

<section className="plan-section" id="plan-section" style="display:none">
  <div className="next">
    <i class="arrow down"></i>
  </div>
  <div className="form-block">
    <form className="form">
      <div className="plan-form">
        <div className="input-block">
          <label htmlFor="name">Nome</label>
          <input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
        </div>

        <div className="continue">
          <button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
            <span className="btn-text">Contratar Plano</span>
            <img className="check-btn" src={check} />
          </button>
        </div>
      </div>
    </form>
  </div>
</section>