使用 javascript 交换 PHP 中的复选框

Question

尝试使用来自超链接的 javascript 翻转 PHP 中两个复选框数组的值。我面临的问题是 php 希望复选框数组使用 [ ] 而 javascript 不希望。

这是我的代码...您建议使用什么代码来使 checkbox2 = checkbox1 AND checkbox1 = checkbox2 中的选中项？

<a id='swap' href=\"javascript: swapContacts();\">Swap</a>
<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='1'>Phone<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='2'>Email<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='3'>Text<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='4'>Mail<br>
<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='1'>Phone<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='2'>Email<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='3'>Text<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='4'>Mail<br>

我需要有关 javascript 中 swapContacts() 代码的帮助。这是我正在尝试使用的：

var i=0;    
for (i=0;i<document.form1.checkbox1.length;i++){
    $tempstr = document.form1.checkbox1[i].value;
    document.form1.checkbox1[i].value= document.form1.checkbox2[i].value;
    document.form1.checkbox2[i].value= $tempstr;
}

Answer 1

类似的东西？

const buttonSwap = document.getElementById('swap')
  ,   checkbox1n = document.querySelectorAll('input[name="checkbox1[]"]')
  ,   checkbox2n = document.querySelectorAll('input[name="checkbox2[]"]')
  ;
buttonSwap.onclick = () =>
  {
  let c1 = [...checkbox1n].map(cb=>cb.checked)
  let c2 = [...checkbox2n].map(cb=>cb.checked)
  checkbox1n.forEach((cb,i)=>cb.checked = c2[i])
  checkbox2n.forEach((cb,i)=>cb.checked = c1[i])
  }

<button id="swap" type="button" >Swap</button>
<br>
 <label><input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='1'>Phone</label><br>
 <label><input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='2'>Email</label><br>
 <label><input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='3'>Text</label><br>
 <label><input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='4'>Mail</label><br>
 <br>
 <label><input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='1'>Phone</label><br>
 <label><input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='2'>Email</label><br>
 <label><input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='3'>Text</label><br>
 <label><input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='4'>Mail</label><br>

Answer 2

您可以遍历项目，检查 set1 和 set2 是否检查了当前索引的项目。

如果没有选中，请选中另一个。反之亦然。

function swapContacts() {
  let set1 = document.querySelectorAll('input[name="checkbox1[]"]');
  let set2 = document.querySelectorAll('input[name="checkbox2[]"]');
  
  for(i=0; i<Math.min(set1.length, set2.length); i++) {
    const checkSet1 = set2[i].checked;
    const checkSet2 = set1[i].checked;
    
    set1[i].checked = checkSet1 ? "checked" : "";
    set2[i].checked = checkSet2 ? "checked" : "";
  }
  
  return false;
}

<a id='swap' href="#" onclick="swapContacts(); return false;">Swap</a>
<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='1'>Phone<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='2'>Email<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='3'>Text<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='4'>Mail<br>
<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='1'>Phone<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='2'>Email<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='3'>Text<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='4'>Mail<br>

Answer 3

function swapContacts() {
  let chks1 = document.querySelectorAll("input[name='checkbox1[]']");
  let chks2 = document.querySelectorAll("input[name='checkbox2[]']");

  let tmp
  for (let i = 0; i < chks1.length; i++) {
    // store val from 1
    tmp = chks1[i].checked;
    chks1[i].checked = chks2[i].checked;
    chks2[i].checked = tmp;

    //console.log(chks1[i], chks2[i]);
  }
}

<a id='swap' href="javascript:void(0)" onclick="swapContacts();">Swap</a>
<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='1'>Phone<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='2'>Email<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='3'>Text<br>
<input class='c_contactmethods' type='checkbox' name='checkbox1[]' value='4'>Mail<br>
<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='1'>Phone<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='2'>Email<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='3'>Text<br>
<input class='c_co_contactmethods' type='checkbox' name='checkbox2[]' value='4'>Mail<br>

使用 javascript 交换 PHP 中的复选框

swapping checkboxes in PHP using javascript

javascript

php

arrays

checkbox