i dont know how to proceed.

<h5>VLAN</h5>  

  <table >
    <thead>
      <tr>
        <th </th>
        <th </th>
        <th </th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <th ></th>
        <input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan01" id="chkbvlan01" data-vlan="1"><label><b>VLAN 1 - native</label>
        <th ></th>
        <input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan02" id="chkbvlan02" data-vlan="80"><label><b>VLAN 80 - Management</label>
        <th ></th>
        <input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan03" id="chkbvlan03" data-vlan="81"><label><b>VLAN 81 - MESTEST</label>
        <br>
      </tr>

I have one array:

var vlans = [1,80,81,82,83]

and the second:

var name = Array();
var summary = Array();
document.querySelectorAll('.checkbox').forEach(item => {
            if(item.checked){
              name = [item.getAttribute("data-vlan")];
    

          };
        });

the second is filled by checkboxes, when they are checked.

This is working.

But I dont get it, how to compare these arrays.

At the end, I want to compare them, and write alle matching values in a new array.

But I dont get it working.

Please help.

CodePudding user response：

To get a list of all the checked checkboxes, probably the simplest way is as follows:

   const values = [...document.querySelectorAll('.checkbox')]
     .filter(i => i.checked)
     .map(i => i.getAttribute("data-vlan"));

If your vlans variable is a list of all possible vlan values then the intersection of the two arrays will simply be values as above.

However if vlans contains a subset of values then you can do it as follows:

   const vlans = [1,80,81,82,83];

   const values = [...document.querySelectorAll('.checkbox')]
     .filter(i => i.checked)
     .map(i => i.getAttribute("data-vlan"));

   const filteredValues = values.filter(v => vlans.includes(v));

Where filteredValues is the list of numbers that exist in both vlans and values.

CodePudding user response：

You could iterate all checkbox and check the check. Then push the value to the array.

Please do not use name as global variable. This is predifined and use by the window object and contains the name.

By using a table and <td>, the inner HTML has to be inside of the tag.

const
    vlans = [1, 80, 81, 82, 83], // what is this for?
    checked = [];

document.querySelectorAll('.checkbox').forEach(item => {
    if (item.checked) checked.push(item.getAttribute("data-vlan"));
});

console.log(checked);

<h5>VLAN</h5>
<table >
  <thead>
    <tr>
      <th >1</th>
      <th >2</th>
      <th >3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td ><input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan01" id="chkbvlan01" data-vlan="1"><label><b>VLAN 1 - native</label></td>
      <td >
        <input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan02" id="chkbvlan02" data-vlan="80"><label><b>VLAN 80 - Management</label></td>
      <td >
        <input type="checkbox" onchange="change04()" checked="checked" disabled=true  name="chkbvlan03" id="chkbvlan03" data-vlan="81"><label><b>VLAN 81 - MESTEST</label></td>
    </tr>
</table>

CodePudding user response：

let name = [];
let summary = [];
document.querySelectorAll(".checkbox").forEach((item) => {
  if (item.checked) {
    //Push the checked items to the variable name array
    name.push( item.getAttribute("data-vlan"));
  }
});
//this to get intersection (How can I find matching values in two arrays)
const matchedValues = vlans.filter(element => name.includes(element)); 
console.log(matchedValues)

Please aware of this:

1. Declare a Array variable with the method new Array () is more verbose, just use []. for instance let name = [].
2. why you use var syntaxe ?
3. consider to properly name your variables(name,summary .. not good )