要为test
创建输入数组,我们可以这样做:
<input name=test[]>
<input name=test[]>
...
但是如何在提交之前更改javascript / jQuery中的每个输入?我想我需要从test[]
传递特定输入的索引。
我坚持$(this).index()
或$(this).parents().index()
,但这些是DOM的索引值,他们不会给出testa[]
的索引值,{ <1}},testb[]
被触发的数组。
所有这一切的原因是,如果没有检查这些复选框的testc[]
值,则不会通过,甚至不设置。这会弄乱我的数据库行,因此我为每行传递一个POST
(而不是将复选框值传递)到数据库中。
这是一个使用FOR LOOP来实现我的目标的工作示例,但它似乎不优雅而且我不想使用循环:
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;
答案 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>