通过复选框输入值传递数组?

时间:2020-09-01 21:54:15

标签: javascript arrays leaflet lodash

当用户选择两个数组时,我试图获取两个数组的交集,但是我不知道如何通过输入值传递整个数组。 这是我的脚本:

var checkedValue = document.querySelector('.leaflet-control-layers-selector:checked').value;

    result = _.intersection(checkedValue);
    console.log(checkedValue);

document.getElementById("AllMuseums").value = AllMuseums;
document.getElementById("MPaid").value = MPaid;
document.getElementById("MFree").value = MFree;
document.getElementById("MResto").value = MResto;

这是我的输入内容:

<label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="AllMuseums" checked><span>All Museums</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MPaid" value="MPaid"><span id="icons1">Paid Admission</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MFree" value="MFree"><span id="icons2">Free Admission</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MResto" value="MResto"><span id="icons3">Restaurants</span></div>
    </label>

这是我的数组:

var AllMuseums=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
        MPaid=[Junibacken,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel],
        MFree=[Naturhistoriska,ArkDes,Moderna],
        MResto=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],

1 个答案:

答案 0 :(得分:1)

有一个解决方案:https://jsfiddle.net/ajxeyqo4

输入:

第一个输入标签增加值

 <label>
    <div><input type="checkbox" class="leaflet-control-layers-selector" id="AllMuseums" value="AllMuseums" checked><span>All Museums</span></div>
</label>
<label>
    <div><input type="checkbox" class="leaflet-control-layers-selector" id="MPaid" value="MPaid"><span id="icons1">Paid Admission</span></div>
</label>
<label>
    <div><input type="checkbox" class="leaflet-control-layers-selector" id="MFree" value="MFree"><span id="icons2">Free Admission</span></div>
</label>
<label>
    <div><input type="checkbox" class="leaflet-control-layers-selector" id="MResto" value="MResto"><span id="icons3">Restaurants</span></div>
</label>
<button onclick='test()'>
    test
</button>

还有您的脚本:

function test(){
    var AllMuseums=['Naturhistoriska','Junibacken','ArkDes','Fjarilshuset','Tekniska','Polismuseet','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel','Moderna'],
            MPaid=['Junibacken','Fjarilshuset','Tekniska','Polismuseet','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel'],
            MFree=['Naturhistoriska','ArkDes','Moderna'],
            MResto=['Naturhistoriska','Junibacken','ArkDes','Fjarilshuset','Tekniska','Skansen','Bergrummet','Vikingaliv','Vasa','Nordiska','Nobel','Moderna'];
            
    var checkedValue = document.querySelectorAll('.leaflet-control-layers-selector:checked');

    var a =[]
    _.map(checkedValue, function(value) {
        a.push(eval(value.value));
    });

    var result = _.intersection(...a);
    console.log(JSON.stringify(result))
}
相关问题