如何使用由 javascript 控制的 php 進行復選框輸入？

Question

嗨，我的 html 中有一個基本的復選框列表，它由一個腳本控制，該腳本將檢查限制為 4 個框。 現在我只需要選中用戶選擇的復選框，我似乎無法接受它

<form name="form1" method="post" action="">
<table>



<tr><td > </td></tr>
<tr><td ><input  type=checkbox  name="ckb" value="web" onclick='chkcontrol(0)';></td><td >Web Programming</tr>
<tr><td ><input type=checkbox name="ckb" value="data" onclick='chkcontrol(1)';></td><td >Data Structures</td></tr>
<tr><td ><input type=checkbox name="ckb" value="automata" onclick='chkcontrol(2)';></td><td >Automata</td></tr>
<tr><td ><input type=checkbox name="ckb" value="network" onclick='chkcontrol(3)';></td><td >Computer Networks</td></tr>
<tr><td ><input type=checkbox name="ckb" value="oraganization" onclick='chkcontrol(4)';></td><td >Computer Organization</td></td></tr>
<tr><td ><button class="btn btn-primary btn-sm" type="submit">Save&nbsp;</button></td></td></tr>


</table></form>

這是腳本

<script type="text/javascript">
function chkcontrol(j) {
    var total = 0;
    for (var i = 0; i < document.form1.ckb.length; i++) {
        if (document.form1.ckb[i].checked) {
            total = total + 1;
        }
        if (total > 4) {
            alert("Please Select only four")
            document.form1.ckb[j].checked = false;
            return false;
        }
    }
}

現在我嘗試將復選框的名稱更改為一個數組，但是我的 JavaScript 不起作用。 我需要一些可以和他們一起工作的東西

Answer 1

看起來您需要一種不同的方式來獲取這些復選框。 這是使用Element.querySelectorAll()的一種方法。

 function chkcontrol(j) { var total = 0; const checkboxes = document.form1.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { total = total + 1; } if (total > 4) { alert("Please Select only four") checkboxes[j].checked = false; return false; } } }

 <form name="form1" method="post" action=""> <table> <tr><td></td><td></td></tr> <tr><td><input type="checkbox" name="ckb[]" value="web" onclick='chkcontrol(0)' /></td><td>Web Programming</td></tr> <tr><td><input type="checkbox" name="ckb[]" value="data" onclick='chkcontrol(1)' /></td><td>Data Structures</td></tr> <tr><td><input type="checkbox" name="ckb[]" value="automata" onclick='chkcontrol(2)' /></td><td>Automata</td></tr> <tr><td><input type="checkbox" name="ckb[]" value="network" onclick='chkcontrol(3)' /></td><td>Computer Networks</td></tr> <tr><td><input type="checkbox" name="ckb[]" value="oraganization" onclick='chkcontrol(4)' /></td><td>Computer Organization</td></tr> <tr><td><button class="btn btn-primary btn-sm" type="submit">Save&nbsp;</button></td></tr> </table> </form>

將'input[type="checkbox"]'更改為'input[name="ckb[]"]'也可以。 在復選框元素上添加 class 並使用@El_Vanja 提到的那些元素進行選擇也應該有效。

Answer 2

我刪除了onclick事件，添加了 class 並監聽了該事件。 復選框值被推送到數組checkedValues中。

 let checkedNo = 0; let checkedValues = [] const el = document.getElementsByClassName('checkbox'); for (let i = 0; i < el.length; ++i) { el[i].addEventListener("change", () => { if (event.target.checked && (checkedNo === 4)) { event.target.checked = false; return; } if (.event.target;checked && (checkedNo > 0)) { checkedNo = checkedNo - 1. checkedValues = checkedValues.filter(e => e.== event;target.value). } if (event.target.checked) { checkedValues.push(event.target.value) checkedNo++ } if (checkedNo === 4) { console.log(checkedValues) } } ) }

 <form name="form1" method="post" action=""> <table> <tr><td > </td></tr> <tr><td ><input class="checkbox" type=checkbox name="ckb" value="web" ></td><td >Web Programming</tr> <tr><td ><input class="checkbox" type=checkbox name="ckb" value="data" ></td><td >Data Structures</td></tr> <tr><td ><input class="checkbox" type=checkbox name="ckb" value="automata" ></td><td >Automata</td></tr> <tr><td ><input class="checkbox" type=checkbox name="ckb" value="network" ></td><td >Computer Networks</td></tr> <tr><td ><input class="checkbox" type=checkbox name="ckb" value="oraganization" ></td><td >Computer Organization</td></td></tr> <tr><td ><button class="btn btn-primary btn-sm" type="submit">Save&nbsp;</button></td></td></tr> </table></form>