Javascript 如何迭代html元素并交换它们的值

我想在点击上/下按钮时交换元素值。例如，在下面的html代码片段中，我有两组指导和通信，在上/下按钮单击时，指导集的所有值（复选框，文本框值）必须与通信值交换。我计划编写一个简单的javascript交换函数，你能帮我用简单干净的javascript代码编写它吗

JS:

var from_list=getElementsByClassName（“from”）；
var to_list=getElementsByClassName（“to”）；
对于（变量i=0；i

HTML:

指导：
框1
框2
框3
Guid名称：


Guid URL:


Guid说明：


通讯：
框1
框2
框3
通讯名称：


通讯网址：


通信说明：

我不清楚你想要实现什么。看看这是否对你有帮助：

window.swap = function(fromClass, toClass) {
  var from_list= document.getElementsByClassName(fromClass);
  var to_list = document.getElementsByClassName(toClass);

  var tmp;
  for(var i = 0; i < from_list.length; i++) {
      //swap logic      
      if (from_list[i].type == "checkbox") {
          tmp = from_list[i].checked;
          from_list[i].checked = to_list[i].checked;
          to_list[i].checked = tmp;      
      } else {
        tmp = from_list[i].value;
        from_list[i].value = to_list[i].value;
        to_list[i].value = tmp;
      }
  }
}

window.swap=函数（从类到类）{
var from_list=document.getElementsByClassName（fromClass）；
var to_list=document.getElementsByClassName（toClass）；
var-tmp；
对于（变量i=0；i

---

JSIDLE:

我看不到任何元素具有

表单

或

to

类。@ZakariaAcharki它们隐藏在HTML中：

swap（'guidance'，'communication'）

。嗨，Lucas，文本框值与您的逻辑交换，而不是复选框项（选中/取消选中）。谢谢。那么你想交换“状态”而不是复选框的实际值？或者你两者都要？卢卡斯，我只想交换状态。我已经更新了答案。谢谢卢卡斯，这很有效！！

<table>
    <tr>
        <td></td>
        <td>Guidance :</td>
        <td>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g1">Box1</td>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g2">Box2</td>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g3">Box3</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Guid Name:</td>
        <td>
            <input type="text" class="guidance" name="guidance_name" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Guid URL :</td>
        <td>
            <input type="text" class="guidance" name="guidance_url" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="DN" onclick="swap('guidance','communication')" />
        </td>
        <td>Guid Description:</td>
        <td>
            <input type="text" class="guidance" name="guidance_desc" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Communication :</td>
        <td>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="commlobs" value="c1">Box1</td>
                    <td>
                        <input type="checkbox" name="commlobs" value="c2">Box2</td>
                    <td>
                        <input type="checkbox" name="commlobs" value="c3">Box3</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="UP" onclick="swap('communication','guidance')" />
        </td>
        <td>Communication Name :</td>
        <td>
            <input type="text" class="communication" name="communication_name" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Communication URL:</td>
        <td>
            <input type="text" class="communication" name="communication_url" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="DN" onclick="swap('communication','training')" />
        </td>
        <td>Communication Description :</td>
        <td>
            <input type="text" class="communication" name="communication_desc" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
</table>

window.swap = function(fromClass, toClass) {
  var from_list= document.getElementsByClassName(fromClass);
  var to_list = document.getElementsByClassName(toClass);

  var tmp;
  for(var i = 0; i < from_list.length; i++) {
      //swap logic      
      if (from_list[i].type == "checkbox") {
          tmp = from_list[i].checked;
          from_list[i].checked = to_list[i].checked;
          to_list[i].checked = tmp;      
      } else {
        tmp = from_list[i].value;
        from_list[i].value = to_list[i].value;
        to_list[i].value = tmp;
      }
  }
}