如何使用由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[]"]'也可以。在复选框元素上添加一个类并选择使用@El_Vanja提到的那些也应该是可行的。

Answer 2

我删除了onclick事件，添加了类并侦听了该事件。将复选框值推送到数组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>

​