javascript通过逻辑连接的元素对进行迭代

javascript iterating through pairs of logically connected elements

本文关键字：元素 迭代 连接 javascript      更新时间：2023-11-10

我有一个网站，里面有一系列用户可以编辑的空文本字段。每个文本字段旁边都有一个复选框，如下所示：

<input type="text" id="textfield1" size="60" /><input type="checkbox"> <br />
<input type="text" id="textfield2" size="60" /><input type="checkbox"> <br />
<input type="text" id="textfield3" size="60" /><input type="checkbox"> <br />

一旦用户单击提交，是否有一种方法可以逐行迭代文本输入和复选框对？

例如，是否可以以某种方式将文本字段和复选框组合在一起，并通过group.textfield.value=遍历这些组？和group.checkbox.value=？

我需要一种简单的方法来确定字段的文本，以及该特定字段的复选框是否选中了

只需迭代text输入，并使用.nextSibling获取每个相邻的checkbox。

确保它们之间没有任何空格。

另一种选择是将它们分组为fieldset元素。。。

<fieldset>
    <input type="text" id="textfield1" size="60" /><input type="checkbox">
</fieldset>
<fieldset>
    <input type="text" id="textfield2" size="60" /><input type="checkbox">
</fieldset>
<fieldset>
    <input type="text" id="textfield3" size="60" /><input type="checkbox">
</fieldset>

然后迭代fieldset元素，并使用.children[0]和.children[1]

给每个输入一个可以用来关联对的名称（它们无论如何都需要）：

<form onsubmit="doStuff(this);">
  <input type="text" id="textfield1" name="textfield1" size="60">
   <input type="checkbox" name="textfield1-cb"> <br>
  <input type="text" id="textfield2" name="textfield2" size="60">
   <input type="checkbox" name="textfield2-cb"> <br>
  <input type="text" id="textfield3" name="textfield3" size="60">
   <input type="checkbox" name="textfield3-cb"> <br>
  <input type="submit">
</form>
<script type="text/javascript">
function doStuff(form) {
  var control, controls = form.elements;
  var pair;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    pair = form[control.name + '-cb'];
    if (control.type == 'text' && pair) {
      // control is the input and pair is the checkbox
    }
  }
}
</script>

上面只要求控件按名称关联，而不是按结构关联，这将使其更加健壮。

相关文章：