WordPress中复选框required属性无法生效的问题咨询

嘿，兄弟，我来帮你捋捋这个问题！首先明确说：functions.php完全允许HTML标签使用required属性，问题出在你的实现逻辑上，不是环境的锅~

先给你拆解下问题根源：

• 原生HTML的required属性是依附于表单提交行为的，只有当用户提交表单（比如点击type="submit"的按钮）时，浏览器才会检查这个属性。但你现在用的是普通的<a>标签跳转，这和表单完全是两个独立的交互，浏览器根本不会触发required的验证逻辑，自然就没效果了。
• 另外你的复选框代码里还多写了一个重复的value属性，虽然不影响功能，但最好修正下，避免代码冗余。

接下来给你两个实用的解决方案，你可以根据需求选：

方案1：用表单提交实现跳转（推荐，原生验证更可靠） #

把跳转逻辑改成表单提交，这样就能直接利用原生的required验证，不用写额外JS：

add_action('web_hook', 'test_button', 10);

function test_button() {
    echo '
    <form action="https://someurl.com" method="get">
        <input type="checkbox" name="Check1" id="Check1" value="yes" required> 
        <label for="Check1">this is the first checkbox</label>
        <button type="submit">Click this to proceed</button>
    </form>
    ';
    echo '<br>';
}

这样用户没勾选复选框就点提交按钮的话，浏览器会自动弹出提示，阻止跳转到目标页面，完全符合你的需求。

方案2：保留a标签，用JS做验证 #

如果你一定要保留<a>标签的形式，那可以加一点JavaScript来做检查：

add_action('web_hook', 'test_button', 10);

function test_button() {
    echo '
    <form>
        <input type="checkbox" name="Check1" id="Check1" value="yes" required> 
        <label for="Check1">this is the first checkbox</label>
    </form>
    ';

    echo '<a href="https://someurl.com" id="proceedLink">Click this to proceed</a>';
    
    // 加入JS验证逻辑
    echo '
    <script>
    document.getElementById("proceedLink").addEventListener("click", function(e) {
        const checkbox = document.getElementById("Check1");
        if (!checkbox.checked) {
            e.preventDefault(); // 阻止默认跳转行为
            alert("请先勾选复选框才能继续哦！"); // 提示用户
        }
    });
    </script>
    ';

    echo '<br>';
}

这个方案里，当用户点击a标签时，JS会先检查复选框是否勾选，没勾选就阻止跳转并弹出提示，达到你要的效果。

备注：内容来源于stack exchange，提问作者JohnLyons