学校项目：如何实现勾选reCAPTCHA复选框后显示提交按钮？

先调整HTML结构并修正JavaScript逻辑，以下是完整可运行的实现方案：

步骤1：修改HTML结构 #

把提交按钮放到表单内部，默认设置为隐藏状态：

<form action="/action_page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <!-- 添加提交按钮，默认隐藏 -->
    <input type="submit" value="Submit" id="submitBtn" style="display: none;">
</form>

<section>
    <label for="check">
        <div class="input-container">
          <input type="checkbox" class="checkbox" id="check">
          <span class="checkbox-text">I'm not a robot</span>
        </div>
      </label>

    <img src="captcha.png" alt="" class="capcap">
    <span class="recaptcha">reCAPTCHA</span>
    <br>
    <a href="#" class="hi">Privacy</a>
    <span class="dash">-</span>
    <a href="#" class="hi">Terms</a>
</section>

<p>Please check the box to verify you're not a robot.</p>

步骤2：编写正确的JavaScript #

替换你原来的脚本，这段代码会监听复选框的状态变化，控制提交按钮的显示/隐藏：

// 获取页面上的复选框和提交按钮元素
const checkbox = document.getElementById('check');
const submitBtn = document.getElementById('submitBtn');

// 监听复选框的勾选状态变化
checkbox.addEventListener('change', function() {
    // 复选框被勾选时显示按钮，取消勾选则隐藏
    submitBtn.style.display = this.checked ? 'block' : 'none';
});

代码说明 #

• document.getElementById()：通过元素的ID获取页面上的DOM元素，是JS操作页面元素的基础方法。
• addEventListener('change', ...)：给复选框绑定状态变化事件，用户勾选/取消勾选时自动触发内部函数。
• this.checked：判断当前复选框是否被勾选，返回true或false。
• style.display：修改元素的显示样式，block表示显示元素，none表示隐藏元素。

这样就能实现需求：只有勾选"I'm not a robot"复选框后，表单的提交按钮才会显示出来。

内容的提问来源于stack exchange，提问作者Mars