我有一长串由 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");
}
答案 0 :(得分:0)
如果您想更改课程,您可以执行以下操作。我不确定在哪种情况下添加哪个类,您可以根据需要更改代码,但是您可以检查按钮是否被禁用,然后添加一个类并删除一个类或执行其他操作,因为您已经启用或禁用按钮,您可以使用它来添加或删除课程。
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>
答案 1 :(得分:0)
如果您想在取消选中所有输入后执行操作,可以使用 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
的更多信息