Question

我从数组格式的一个变量中获取值，因此通过使用for循环，它将进行迭代，并在单击输入类型单选按钮时单击每个值，并用逗号将其压入隐藏字段

我尝试了此操作，但未插入任何内容。如何将这些值推送到隐藏字段？

var id = ["1", "2"]; // getting this value from another varaible in array format

for (var i = 0; i < id.length; i++) {
  $("input[name=radion_btn" + id[i] + "]").change(function() {
    $(".selected_val").push(id[i]); //values like 1,2 want to push in hidden field when click on radio button
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="selected_val[]" value="" class="selected_val" />
<input type="radio" name="radion_btn1" value="" />
<input type="radio" name="radion_btn2" value="" />

Answer 1

根据您的代码。 for(var i = 0; i < id.length; i++) {在您的事件发生时运行两次。那时我的值变成2，而id [2]变得不确定。下面的代码应该可以工作。

var id = ["1", "2"]; // getting this value from another varaible in array format
arrayData = [];
for (var i = 0; i < id.length; i++) {
  $("input[name=radion_btn" + id[i] + "]").change(function() {
    console.log($(this).val());
    arrayData.push($(this).val()); //values like 1,2 want to push in hidden field when click on radio button
    $('.selected_val').val(arrayData.join());
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="value" name="selected_val[]" value="" class="selected_val" />
<input type="radio" name="radion_btn1" value="1" />
<input type="radio" name="radion_btn2" value="2" />

Answer 2

您可以通过在新值之前添加隐藏输入的值来模拟推送

var id = ["1", "2"]; // getting this value from another varaible in array format

for (var i = 0; i < id.length; i++) {
  $(".selected_val").val("");
  $("input[name=radion_btn" + id[i] + "]").change(function() {
    $(".selected_val").val((i == 0 ? "" : ",") + $(".selected_val").val() + id[i]);
  });
}

Answer 3

这是一种可能有用的方法的示例。请参见下面的摘要中的评论。

let obj = {};  // create an empty object to store the clicked values
$(".radio").change(function() {  // when a radio button is clicked
  obj[this.id] = $(this).val();  // store it in the object
  $(".selected_val").val(JSON.stringify(obj));  // and add the object to hidden field as string
  console.log($(".selected_val").val());  // spit it out to the console
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="selected_val[]" value="" class="selected_val" />
<input type="radio" class="radio" name="radion_btn1" id="1" value="1" />1
<input type="radio" class="radio" name="radion_btn2" id="2" value="2" />2
<input type="radio" class="radio" name="radion_btn3" id="3" value="3" />3

您会注意到我为所有单选按钮添加了一个通用类。这就是我要附加的事件处理程序。我还将ID也添加到了单选按钮元素中。

这可能适合您的情况，也可能不是最有效，但希望可以帮助您正确地开始工作。

更新

如果您希望将值存储在数组中，只需将其更改为数组即可：

let arr = [];
$(".radio").change(function() {
    arr.push($(this).val());
    $(".selected_val").val(JSON.stringify(arr));
}

当然，这不会将ID与带有对象的值相关联。

当使用jQuery单击单选按钮时，如何将值推入隐藏的输入类型？

3 个答案: