how to get checkboxes values by name and check if these value exists in another array, become checke-CodePudding

I'm trying to get values from checkboxes by their name, and check if these values exists in another array, if exists, so the values that exists, become (checked) by press a button, I use jquery for that, and tried a lot of ways but all checkboxes stills unchecked although I passed their values in if statement.

Checkboxes:

<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="1">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="2">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="3">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="4">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="5">

script(jquery):

       var array = [1,2,3];
       $('input[name="contactsCheckboxEdit"]').each(function() {
           if(jQuery.inArray(this.value, array) !== -1) {
               this.checked = true;
           }
       });

it's supposed the inputs which have values(1,2,3) become (checked) but all still (unchecked). any help please?

CodePudding user response：

JQuery is outdated and not recommended anymore nowadays, var is also not recommended anymore, below I made a solution in pure JS:

const list = [1, 2, 3];

for (const checkbox of document.querySelectorAll("#contactsCheckbox[name=contactsCheckboxEdit]")) {
  if (list.includes(Number(checkbox.value))) {
    checkbox.checked = true;
  }
}

<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="1">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="2">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="3">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="4">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="5">

Learn Modern JS at:

I know programming: https://exploringjs.com/impatient-js/

I don't know programming: https://javascript.info/

All-in-one: https://phoenix35.js.org/

CodePudding user response：

You can do it with a for loop by checking value in array using function

var arrayCheck = [1,2,3];

$('input[name="contactsCheckboxEdit"]').each(function() {
  let inputValue = $(this).val();
  
  if (checkArrayValue(inputValue, arrayCheck) == 'Exist') {
    $(this).prop('checked', true);
  }
});

function checkArrayValue(value, array) {
  var result = "Doesn't exist";
 
  for(var i=0; i < array.length; i  ) {
    var name = array[i];
    if (name == value) {
      result = 'Exist';
      break;
    }
  }

  return result;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="1">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="2">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="3">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="4">
<input id="contactsCheckbox" name="contactsCheckboxEdit"  type="checkbox" value="5">