Question

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

<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 />

用户点击提交后，有没有办法逐行迭代textinput和checkbox对？

例如，是否有可能以某种方式将文本字段和复选框组合在一起并迭代这些组进行group.textfield.value =？和group.checkbox.value =？

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

Answer 1

只需遍历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]

Answer 2

为每个输入命名（无论如何他们都需要），可用于关联这些对：

<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>

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

javascript迭代成对的逻辑连接元素

2 个答案: