如何获得&#34;数组索引&#34;触发输入,如<input name =“test []”/>?

时间:2018-02-22 21:41:40

标签: javascript jquery html arrays input

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

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

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

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

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

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

&#13;
&#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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您可以使用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>