Javascript checkbox input with 2 values by order of selection

January 18, 2024

Question from a new JavaScript’er, and I’m not sure how to correctly describe this.

let list = [];
let list2 = [];
var metarPrecipitationRaw;
var metarPrecipitation;
var ThecondPrecipitation;
document.querySelectorAll('input[name="Precip"]').forEach(function(box) {
  box.addEventListener("change", function(evt) {
    let boxval = evt.target.value;
    //let boxval2 = evt.target.valueTwo;
    let boxval2 = evt.target.getAttribute('valueTwo');
    if (true === box.checked) {
      list.push(boxval);
      list2.push(boxval2);
    } else {
      list = list.filter(function(val) {
        return boxval !== val;
        return boxval2 !== val;
        //return boxval2 = box.getAttribute("valueTwo").value;
      });
    }
    console.dir(list);
    console.dir(list2);
    metarPrecipitationRaw = list.toString();
    ThecondPrecipitation = list2.toString();
    metarPrecipitation = metarPrecipitationRaw.replace(",", "");
    console.log(metarPrecipitation);
    console.log(ThecondPrecipitation);
    //  console.log(boxval);
    //  console.log(boxval2);
  });
});

<html>

<body>
  <input name="Precip" type="checkbox" id="Precip" value="DZ" valueTwo="Drizzle" />Drizzle (DZ)
  <input name="Precip" type="checkbox" id="Precip" value="RA" valueTwo="Rain" />Rain (RA)
  <input name="Precip" type="checkbox" id="Precip" value="SN" valueTwo="Snow" />Snow (SN)
  <input name="Precip" type="checkbox" id="Precip" value="SG" valueTwo="Snow Grains" />Snow Grains (SG)
  <input name="Precip" type="checkbox" id="Precip" value="IC" valueTwo="Ice Crystals" />Ice Crystals (IC)
  <input name="Precip" type="checkbox" id="Precip" value="PL" valueTwo="Ice Pellets" />Ice Pellets (PL)
  <input name="Precip" type="checkbox" id="Precip" value="GR" valueTwo="Hail" />Hail (GR)
  <input name="Precip" type="checkbox" id="Precip" value="GS" valueTwo="Small Hail" />Small Hail (GS)

</body>

</html>

I’m working with a user input page that accepts multiple checkbox selection and by the order the checkboxes are selected. I’m looking for 2 values from the input, value="" and valueTwo="".
So far, so good. I have those working for the initial checkbox selection with code from @bloodyKnuckles,
How to get checked box order by selecting first

But, when a user unselects a checkbox, the output from the script will reflect this for only one of the values (value), but not the other (valueTwo).

Example:

Checkbox Snow (SN), then Rain (RA) in order.
Console shows SNRA and Snow,Rain
Then Rain (RA) is unchecked
Console shows SN (desired output), and Snow,Rain (not desired output, no change)
Then Rain (RA) is checked again
Console shows SNRA (desired output, but Snow,Rain,Rain (again, not desired)

They need to match the change action.

First question: Does this make sense?

Second question: What am I missing here?

Oh, and no library like jQuery for this. It’s not an option per specification.

>Solution :

There are two problems with your filter() call:

The callback function ends when the first return statement executes, so return boxval2 !== val; never executes.
However, that test isn’t even appropriate, because boxval2 was pushed into list2, not list. You need a separate filter() call to remove boxval2 from list2.

Another issue: Don’t use toString() to convert the array to a list. Use .join(). Then you can specify the delimiter explicitly, and you don’t need to remove all the commas with replace(). Also, replace() only replaces the first match when the first argument is a string; you need to use replaceAll() replace all matches, or use a regular expression with the g flag.

And instead of using the nonstandard valueTwo property, use data-value-two. This can be accessed with evt.target.dataset.valueTwo.

let list = [];
let list2 = [];
var metarPrecipitationRaw;
var metarPrecipitation;
var ThecondPrecipitation;
document.querySelectorAll('input[name="Precip"]').forEach(function(box) {
  box.addEventListener("change", function(evt) {
    let boxval = evt.target.value;
    let boxval2 = evt.target.dataset.valueTwo;
    if (box.checked) {
      list.push(boxval);
      list2.push(boxval2);
    } else {
      list = list.filter(val => boxval !== val);
      list2 = list2.filter(val => boxval2 !== val);
    }
    console.dir(list);
    console.dir(list2);
    metarPrecipitation = list.join('');
    ThecondPrecipitation = list2.join(',');
    console.log(metarPrecipitation);
    console.log(ThecondPrecipitation);
  });
});

<html>

<body>
  <input name="Precip" type="checkbox" id="Precip" value="DZ" data-value-two="Drizzle" />Drizzle (DZ)
  <input name="Precip" type="checkbox" id="Precip" value="RA" data-value-two="Rain" />Rain (RA)
  <input name="Precip" type="checkbox" id="Precip" value="SN" data-value-two="Snow" />Snow (SN)
  <input name="Precip" type="checkbox" id="Precip" value="SG" data-value-two="Snow Grains" />Snow Grains (SG)
  <input name="Precip" type="checkbox" id="Precip" value="IC" data-value-two="Ice Crystals" />Ice Crystals (IC)
  <input name="Precip" type="checkbox" id="Precip" value="PL" data-value-two="Ice Pellets" />Ice Pellets (PL)
  <input name="Precip" type="checkbox" id="Precip" value="GR" data-value-two="Hail" />Hail (GR)
  <input name="Precip" type="checkbox" id="Precip" value="GS" data-value-two="Small Hail" />Small Hail (GS)

</body>

</html>