Question

我想使用Javascript获取所有标签及其输入元素。我还有收音机，复选框和textarea元素。然后我想把它放在一个对象数组中。

这就是我所做的，

var html = data;
var array = [];
for(var i=0;i<$("input").length;i++){
    array[i] = {label:"",val:$("input").eq(i).val()};
}
console.log(array);

顺便说一下，没有属性，他们的下一个兄弟也不总是输入/ radio / checkbox / textarea元素。有时，结构是，

<label>Something:</label><Br/ ><input type="text" />

在这种情况下，我该怎样做我想做的事？

Answer 1

您可以使用map()方法生成数组，并使用prevAll()方法和jQuery :first伪类选择器来获取标签（您不能使用prev()方法，因为中间有一个br标记。

var array = $("input").map(function(){
  return { 
    label : $(this).prevAll('label:first').text(),
    val:$(this).val()
  };
}).get();

console.log(array);

仅供参考：如果在某些情况下输入被label包装，那么您可以使用closest()方法获取包装元素。虽然您可以使用:input来选择所有表单元素。

var array = $(":input").map(function() {
  return {
    label: $(this).prevAll('label:first').text(),
    val: $(this).val()
  };
}).get();

console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some</label>
<Br/>
<input type="text" value="1" />
<label>Some1</label>
<Br/>
<input type="text" value="11" />
<label>Some2</label>
<Br/>
<input type="text" value="2" />
<label>Some3</label>
<Br/>
<input type="text" value="4" />
<label>Some4</label>
<Br/>
<input type="text" value="3" />

<label>Some422</label>
<Br/>
<select><option value="1"></option><select>

Answer 2

您使用的标签错误，所以我假设您真正想要的只是文本字段复选框等的某些标识属性以与该值相关联。

这是我的去处 https://jsfiddle.net/1akh5qg9/

JS

<form id="test-form">
  <label>Label1:</label>
  <input class="get-value" name="input1" type="text" />
  <br>
  <label>Label2:</label>
  <input class="get-value" name="input2" type="text" />
  <br>
  <label>Label3:</label>
  <input class="get-value" type="checkbox" name="checkbox1">I have a bike
  <br>
  <br>
  <button id="submit-button">Get Values</button>
</form>

HTML

let btn = document.getElementById('submit-button');
let form = document.forms['test-form'].getElementsByClassName('get-value');
let valueArr = [];

// attach onclick handler
btn.onclick = function(e) {
  e.preventDefault();
  getFormValues();
}

// getFormValues
function getFormValues() {
 for (var x of form){
  valueArr.push({label:x.name ,value:x.value})
 }
 console.log(valueArr);
}

结果

[
 {label:"input1", value:"test1"}, 
 {label:"input2", value:"test1"}, 
 {label:"checkbox1", value:"on"}
]

Answer 3

如果要将所有元素（标签，输入）选择到单个数组中，请尝试使用自定义属性并使用类似这样的选择器$（＆＃39; * [data-all-labels-inputs]＆＃39 ）;

Answer 4

我建议在HTML中预先做一些事情来标记你想要的项目。

您可以将标签和输入对放在DIV中以表示它们一起使用，然后为DIV提供一个可以过滤和循环的类。

您还可以使用数据标记属性来命名对。假设给出所有标签并输入属性data-LabelInp =“NameA”。然后，您可以选择具有属性data-LabelInp的所有标签，获取属性的值，并使用data-LabelInp ===找到匹配的输入值。

如何在javascript中获取所有标签及其输入元素

4 个答案: