Question

我有一长串由 PHP 生成的输入复选框，我需要 (1) 在至少选中一个复选框时启用和添加/删除一个类，以及 (2)当没有选中任何框时，我需要禁用和添加/删除一个类。到目前为止，一旦选中一个框，我就可以添加/删除课程，但我不知道如何做第二部分。

注意：我是 JavaScript 的新手，所以请多多关照。此外，由于 PHP 怪癖和页面上的其他元素无关，HTML 部分无法更改。

HTML：

<form method="post">
    <div>
        <input type='checkbox' name='uuid[]' value=1 id=1 onclick="terms_changed(this)"/>
        <input type='checkbox' name='uuid[]' value=2 id=2 onclick="terms_changed(this)"/>
        <input type='checkbox' name='uuid[]' value=3 id=3 onclick="terms_changed(this)"/>
        // plus unlimited others, you get the idea //
    </div>
    <div>
        <button class="button grey-btn" type="submit" id="submit_button" disabled>Sign Up</button>
    </div>
</form>

Javascript：

function terms_changed(termsCheckBox){
       document.getElementById("submit_button").disabled = !termsCheckBox.parentElement.querySelectorAll("input[type=checkbox]:checked").length;
       document.getElementById("submit_button").classList.remove("grey-btn");
       document.getElementById("submit_button").classList.add("green-btn");
   }

Answer 1

如果您想更改课程，您可以执行以下操作。我不确定在哪种情况下添加哪个类，您可以根据需要更改代码，但是您可以检查按钮是否被禁用，然后添加一个类并删除一个类或执行其他操作，因为您已经启用或禁用按钮，您可以使用它来添加或删除课程。

function terms_changed(termsCheckBox){
       document.getElementById("submit_button").disabled = !termsCheckBox.parentElement.querySelectorAll("input[type=checkbox]:checked").length;
       if(document.getElementById("submit_button").disabled) {
         document.getElementById("submit_button").classList.remove("grey-btn");
         document.getElementById("submit_button").classList.add("green-btn");
       } else {
       document.getElementById("submit_button").classList.add("grey-btn");
         document.getElementById("submit_button").classList.remove("green-btn");
         }
   }

<form method="post">
    <div>
        <input type='checkbox' name='uuid[]' value=1 id=1 onclick="terms_changed(this)"/>
        <input type='checkbox' name='uuid[]' value=2 id=2 onclick="terms_changed(this)"/>
        <input type='checkbox' name='uuid[]' value=3 id=3 onclick="terms_changed(this)"/>
        // plus unlimited others, you get the idea //
    </div>
    <div>
        <button class="button grey-btn" type="submit" id="submit_button" disabled>Sign Up</button>
    </div>
</form>

Answer 2

如果您想在取消选中所有输入后执行操作，可以使用 document.querySelector 仅选择选中的项目并获取该信息

这是一个例子：

  function isNoneChecked() {
    const checkedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');
    const noneChecked = checkedCheckbox.length === 0;
    return noneChecked;
    }

您可以简单地将此函数添加到您的代码中，然后在每次输入更改后根据此函数结果执行某种逻辑：

function terms_changed(termsCheckBox){
       document.getElementById("submit_button").disabled = !termsCheckBox.parentElement.querySelectorAll("input[type=checkbox]:checked").length;
       document.getElementById("submit_button").classList.remove("grey-btn");
       document.getElementById("submit_button").classList.add("green-btn");
       
       if (isNoneChecked) {
        // perform logic here
       }  
   }

您可以在 MDN docs.

中阅读有关 querySelectorAll 的更多信息

取消选中所有输入复选框后删除/添加类

2 个答案: