如何在这个JavaScript中更简单？

我正在尝试制作一个Js来搜索和过滤JSON中的项目

所以我在“形式”中使用了很多无线电，结果是[X，X，X，X，X，X]

我将设置50个标签x 3（选择），我可以感觉到我的功能会很大

我可以通过什么方式将函数更改为更简单

函数myFunction（）{
var elements1=document.getElementsByName（“主席”），
elements2=document.getElementsByName（“car”），
elements3=document.getElementsByName（“房子”），
elements4=document.getElementsByName（“树”），
elements5=document.getElementsByName（“花”），
elements6=document.getElementsByName（“grass”）；
var i；
对于（var a=”，i=elements1.length；i--；）{
if（元素1[i]。选中）{
var a=元素1[i]。值；
打破
}
};
对于（var b=”，i=elements2.length；i--；）{
if（元素2[i]。选中）{
var b=elements2[i]。值；
打破
}
};
对于（var c=”，i=elements3.length；i--；）{
if（元素3[i]。选中）{
var c=元素3[i]。值；
打破
}
};
对于（var d=”，i=elements4.length；i--；）{
if（元素4[i]。选中）{
var d=元素4[i]。值；
打破
}
};
对于（var e=”，i=elements5.length；i--；）{
if（元素5[i]。选中）{
var e=元素5[i]。值；
打破
}
};
对于（var f=），i=elements6.length；i--；）{
if（元素6[i]。选中）{
var f=元素6[i]。值；
打破
}
};
var o2=document.getElementById（“output2”）；
o2.value=“[“+a+”、“+b+”、“+c+”、“+d+”、“+e+”、“+f+””；
o2.innerHTML=o2.value；
}

---

使用

document.querySelector（）

根据元素名称直接选择选中单选按钮的值

function myFunction() {
  var chair = document.querySelector('input[name="chair"]:checked').value;
  var car = document.querySelector('input[name="car"]:checked').value;
  var house = document.querySelector('input[name="house"]:checked').value;
  var tree = document.querySelector('input[name="tree"]:checked').value;
  var flower = document.querySelector('input[name="flower"]:checked').value;
  var grass = document.querySelector('input[name="grass"]:checked').value;

  var o2 = document.getElementById("output2");
  o2.value = "[" + chair + "," + car + "," + house + "," + tree + "," + flower + "," + grass + "]";
  o2.innerHTML = o2.value;
}

使用数组

function myFunction() {
    var elem_ids = [ "chair", "car", "house", "tree", "flower", "grass"];
    var elems = elem_ids.map(id => document.getElementById(id));
    var elems_check_values = elems.map(el => {
        // el is kind of an array so
        for(var i = 0; i < el.length; ++i)
            if(el[i].checked)
                return el[i].value;
        return undefined;
    }).filter(value => value == undefined) // to filter undefined values;

  var output = "[" + elems_check_values.join(",") + "]";
  var o2 = document.getElementById("output2");
  o2.innerHTML = output
}

函数myFunction（）{
var elem_id=[“椅子”、“汽车”、“房子”、“树”、“花”、“草”]；
var elems=elem_id.map（id=>document.getElementById（id））；
var elems\u check\u values=elems.map（el=>{
//el是一种数组，所以
对于（变量i=0；ivalue==undefined）//用于筛选未定义的值；
var output=“[”+元素检查值。连接（“，”+“]”）；
var o2=document.getElementById（“output2”）；
o2.innerHTML=输出
}

给表单一个id，您可以将其作为对象引用

function myFunction() {

    var form = document.getElementById("myForm");
    var parts = [
        form.chair.value,
        form.car.value,
        form.house.value,
        form.tree.value,
        form.flower.value,
        form.grass.value
    ];

    var o2 = document.getElementById("output2");
    o2.innerHTML = '[' + parts.join(',') + ']';
}

这是一个使用FormData对象的更简单的解决方案。它支持任意数量的命名表单字段，而无需在函数中实际命名它们：

function myFunction() {

    var myForm = document.getElementById('myForm');
    var formData  = new FormData(myForm);
    var parts = Array.from(formData.values());

    var o2 = document.getElementById("output2");
    o2.innerHTML = '[' + parts.join(',') + ']';
}

---

您的问题可以概括为：如何在给定表单中聚合所有字段的值？
该解决方案是一个只需5行的函数，可用于任何类型的任意数量的输入。

元素的DOM模型提供了命名键（例如，

myform.inputName

），每个键都有一个

值

属性。对于单选按钮，例如

myform.tree.value

将自动提供所选单选按钮的值

有了这些知识，您就可以创建一个函数，该函数具有一个简单的签名，该签名采用HtmleElement的形式，并为您需要的值创建一个字段名数组，如下所示：（点击搜索按钮查看结果，然后随意更改单选按钮）

函数getFormValues（表单，字段）{
var结果=[]；
对于（变量i=0；i
您需要做的是将代码分解为可重用的块。因此，请创建一个方法来获取值。这将减少大量代码。之后，您应该寻找一种方法来减少需要列出的元素数量。最后，找到一种获取所有值的简单方法

下面是实现这一点的代码。它使用一个helper方法来获取元素，找到值。然后使用数组来知道要查找哪些元素组。最后，它使用map在列表上迭代，这样您就不必编写多个函数调用的代码


函数getSelected（radioBtnGroup）{
//获取单选按钮组的元素
var elms=document.getElementsByName（radioBtnGroup）
//绕过去
对于（var i=0；i使用map可能有助于使helper方法
函数getChecked（rabioButtonGroup）{}
也可以在这里查看：您可以使用jquery datatables来显示JSON数据，高度可配置且易于使用客户端搜索和过滤器的UI。这意味着我不需要在每个收音机上设置id和类。