Question

要为test创建输入数组，我们可以这样做：

<input name=test[]>
<input name=test[]>
...

但是如何在提交之前更改javascript / jQuery中的每个输入？我想我需要从test[]传递特定输入的索引。

我坚持$(this).index()或$(this).parents().index()，但这些是DOM的索引值，他们不会给出testa[]的索引值，{ <1}}，testb[]被触发的数组。

所有这一切的原因是，如果没有检查这些复选框的testc[]值，则不会通过，甚至不设置。这会弄乱我的数据库行，因此我为每行传递一个POST（而不是将复选框值传递）到数据库中。

这是一个使用FOR LOOP来实现我的目标的工作示例，但它似乎不优雅而且我不想使用循环：

＆＃13;

textbox

＆＃13;

$(document).ready(function() {
  $("input.test").change(function() {
    rows = document.getElementsByName("LanguageLevels[]");


    // ### This is the part I would really like to change - more elegant please?!?
    var getIndex = 0;
    testaArray = document.getElementsByName("testa[]");
    testbArray = document.getElementsByName("testb[]");
    testcArray = document.getElementsByName("testc[]");

    for (var i = 0; i < testaArray.length; i++) {
      if ((this == testaArray[i]) || (this == testbArray[i]) || (this == testcArray[i])) {
        getIndex = i;
        break;
      }
    }
    // #### End of un-elegant code

    rows[getIndex].value = this.value + " " + this.checked;
  });
});

＆＃13;

Answer 1

您可以使用jQuery的.index(element)来查找元素相对于选择的索引。

如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。如果找不到该元素，.index（）将返回-1。

例如，将this传递给index()会找到触发事件的元素的索引，相对于jQuery选择：

var index_of_this_within_selection = jQuery(selection).index(this)

因此，为了确定复选框的“数组索引”，我为每个输入添加了“组”数据属性和类。该组定义了输入所属的“数组”。

<input type="checkbox" name="testa[]" value="test1" class="test testa" data-group="testa">

使用该信息，我们可以选择具有该数组名称类的所有输入，并在该选择中找到this的索引。

这是一个有效的例子：

jQuery(function() {

  $rows = jQuery('.language_levels');

  jQuery("input.test").change(function() {

    var $this = jQuery(this);
    var group_name = $this.data('group');
    var group_index = jQuery('.' + group_name).index(this);

    $rows[group_index].value = this.value + " " + this.checked;

    console.log('Index of "' + group_name + '" = ' + group_index);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="LL">
  <label>1. <input type="checkbox" name="testa[]" value="test1" class="test testa" data-group="testa"></label>
  <label>2. <input type="checkbox" name="testb[]" value="test2" class="test testb" data-group="testb"></label>
  <label>3. <input type="checkbox" name="testc[]" value="test3" class="test testc" data-group="testc"></label>
  <input name="LanguageLevels[]" class="language_levels" size="37" placeholder="<--Please Choose one of the three" readonly>
</div>

<div class="LL">
  <label>1. <input type="checkbox" name="testa[]" value="test4" class="test testa" data-group="testa"></label>
  <label>2. <input type="checkbox" name="testb[]" value="test5" class="test testb" data-group="testb"></label>
  <label>3. <input type="checkbox" name="testc[]" value="test6" class="test testc" data-group="testc"></label>
  <input name="LanguageLevels[]" class="language_levels" size="37" placeholder="<--Please Choose one of the three" readonly>
</div>

修改

如果你真的不需要索引而只需要为点击的行设置输入，那么可能有一个更简单的方法：

使用jQuery的closest()标识所单击复选框的行然后使用context selector设置该行中.language_levels输入的值。

jQuery(function() {

  jQuery("input.test").change(function() {

    var $row = jQuery(this).closest('.LL');
    var $input = jQuery('.language_levels', $row);

    $input.val(this.value + " " + this.checked);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="LL">
  <label>1. <input type="checkbox" name="testa[]" value="test1" class="test"></label>
  <label>2. <input type="checkbox" name="testb[]" value="test2" class="test"></label>
  <label>3. <input type="checkbox" name="testc[]" value="test3" class="test"></label>
  <input name="LanguageLevels[]" class="language_levels" size="37" placeholder="<--Please Choose one of the three" readonly>
</div>

<div class="LL">
  <label>1. <input type="checkbox" name="testa[]" value="test4" class="test"></label>
  <label>2. <input type="checkbox" name="testb[]" value="test5" class="test"></label>
  <label>3. <input type="checkbox" name="testc[]" value="test6" class="test"></label>
  <input name="LanguageLevels[]" class="language_levels" size="37" placeholder="<--Please Choose one of the three" readonly>
</div>

如何获得＆＃34;数组索引＆＃34;触发输入，如<input name =“test []”/>？

1 个答案:

修改