javascript - with - jquery checkbox checked




Why is Javascript equating 5== 8 as true? (2)

So I have 2 check-boxes:

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
        if (statusList.length > 0) {
            for (var i = 0; i < statusList.length; i++) {
                if (parseInt(statusList[i]) == parseInt(x)) {
                    statusList[i] = 123;
                } else {
                    statusList.push(x);
                }
            }
        } else {
            statusList.push(x);
        }
    }
    alert(statusList);
}
<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>

When I click a checkbox it adds it to a JavaScript list, if it's already in the list I want to overwrite it with another value (123 in this example).

But when I click the second one (doesn't matter the order, the 2nd element is always 123 for some reason.

Where as I would expect if I click the top check-box it would be a list containing '5', then clicking the second check-box I would expect 5,8 but it alerts as 5,123 , don't really see why it's doing this as 5==8 is false... any ideas?

Updated algorithm to fix underlying issue:

In-case anyone ever finds this useful I changed the algorithm to a better alternative:

var statusList = [];
function updateStatusString(x) {
    if (statusList.length > 0) {
        if (statusList.includes(x)) {
            var idx = statusList.indexOf(x);
            if (idx != -1) {
                statusList.splice(idx, 1);
            }
        }
        else {
            statusList.push(x);
        }
    } else {
        statusList.push(x);
    }
    alert(statusList);
}

Because you are iterating over the statusList . At first iteration you check if 5 == 8, then moves to else part and inserts 8 in statusList . Your statusList is = [5, 8]. For next iteration, this becomes true statuslist[i] will be 8 and 8===8 and your statement - statusList[i] = 123; will replace last inserted 8 value with 123 . Therefore, your statusList array will have ["5", 123] .

var statusList = [];

function updateStatusString(x) {
  const input = parseInt(x);
  if (statusList != null) {
    if (statusList.includes(input)) {
      const idx = statusList.indexOf(input);
      statusList[idx] = 123;
    } else {
      statusList.push(input);
    }
    alert(statusList);
  }
}
<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>

<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>


It looks like the loop was causing your issue.

  1. You were checking for the existence of x , which on the first loop was false
  2. You pushed it to the array
  3. Second loop, it existed and was replaced with 123

You can dramatically simplify your code by removing one of the if checks, and using array.prototype.includes instead of looping and checking equality.

Edit: Added a third input to demonstrate 123 being added.

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
      if (statusList.includes(x)) {
          statusList[statusList.indexOf(x)] = 123;
      } else {
          statusList.push(x);
      }
    }
    
    alert(statusList);
}
<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("5")>&nbsp;"Active"</label>





equality