0

As I descripted in the title of the subject. I would like to help me about how search specific data from Search input (for example telephone numbers: 252633000000, 252633000001) and after i clicked SELECT ALL button, I want to select only all checkboxs of the searched telephone numbers. how can i do that?

HTML

<input type="search" name="" id="allNumbers"/>

<button id="SearchingNumbers_btn">Select all</button>




<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000000</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000000" data-u-mobile="252633000000"/>

        <input type="hidden" name="phone" value="252633000000">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000001</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000001" data-u-mobile="252633000001"/>

        <input type="hidden" name="phone" value="252633000001">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000002</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000002" data-u-mobile="252633000002"/>

        <input type="hidden" name="phone" value="252633000002">

        <span class="checkmark"></span>
    </div>
</label>

CSS

/* The container */
.container22 {
  position: relative;
  display: block;
  width: 70%;
  padding: 16px;
  background-color: white;
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 200ms ease-in-out;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 20px;
}

/* Hide the browser's default checkbox */
.container22 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 55px;
  /*height: 25px;
  width: 25px;*/
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container22:hover input ~ .checkmark {
  background-color: #f0d128;
}

/* When the checkbox is checked, add a blue background */
.container22 input:checked ~ .checkmark {
  background-color: #C61D1D;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container22 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container22 .checkmark:after {
    left: 24px;
    top: 36px;
    width: 10px;
    height: 27px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

JAVASCRIPT

let container22  = document.getElementsByClassName('container22');
let container22_Length = container22.length;

let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
let allNumbers = document.getElementById('allNumbers');




SearchingNumbers_btn.addEventListener('click', function(){

    var insideTextarea = allNumbers.value;
    const myArr = insideTextarea.split("\n");
    console.log(myArr);

    ...........................
    ...........................
    ...........................

});
Mohammed
  • 91
  • 7
  • You can take further help from this question : https://stackoverflow.com/q/69144542/16846346 . Some starting point is provided in below answer – Rana Oct 16 '21 at 12:48

1 Answers1

1

You can add function like in below snippet which will match any number in the telephone and if one of the number matched it will check the input

Below snippet is for demo only on how to start you can add further functionalities when no search is found or if empty and much more according to need

You can take some further help from here which is similar but with text search

Core part is

function refree() {
  var reader = document.getElementsByClassName("checkbox_inputs")
  for (let i = 0; i < reader.length; i++) {
    var readerText = reader[i].value
    var reed = document.getElementById("allNumbers").value;
    if (reed != '') {
      if (readerText.indexOf(reed) > -1) {
        reader[i].checked = true;
      }
    } else {
      reader[i].checked = false;
    }
  }
}

Let's see how this works

When search btn is clicked

  1. it will take run a function refree(can name any)
  2. all input are called with a variable reader which we will use to take values from each input
  3. for loop is applied which work as a checker for each input , the loop is running number of input(telephone number) times (here 3) .
  4. value from input is taken into readerText variable and search value is taken into reed variable . (variable can be named any)
  5. Now a condition is run if search is not empty than it is true and 1st statement will run else the second one
  6. When statement is true than again a condition is passed which check whether searched number is present or not (Here single number is matched than also input will be checked which can be changed to only check when complete number is matched) .

Main work here is of .indexOf which is searching search query inside all numbers

If you want complete number to be matched than change condition
readerText.indexOf(reed) > -1 to readerText=== reed

let container22 = document.getElementsByClassName('container22');
let container22_Length = container22.length;

let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
let allNumbers = document.getElementById('allNumbers');



SearchingNumbers_btn.addEventListener("click", refree);

function refree() {
  var reader = document.getElementsByClassName("checkbox_inputs")
  for (let i = 0; i < reader.length; i++) {
    var readerText = reader[i].value
    var reed = document.getElementById("allNumbers").value;
    if (reed != '') {
      if (readerText.indexOf(reed) > -1) {
        reader[i].checked = true;
      } else {
        reader[i].checked = false;
      }
    } else {
      reader[i].checked = false;
    }
  }
}
/* The container */

.container22 {
  position: relative;
  display: block;
  width: 70%;
  padding: 16px;
  background-color: white;
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 200ms ease-in-out;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 20px;
}


/* Hide the browser's default checkbox */

.container22 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 55px;
  /*height: 25px;
  width: 25px;*/
  background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container22:hover input~.checkmark {
  background-color: #f0d128;
}


/* When the checkbox is checked, add a blue background */

.container22 input:checked~.checkmark {
  background-color: #C61D1D;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container22 input:checked~.checkmark:after {
  display: block;
  top: 7px;
}


/* Style the checkmark/indicator */

.container22 .checkmark:after {
  left: 24px;
  top: 36px;
  width: 10px;
  height: 27px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<input type="number" name="" id="allNumbers" />

<button id="SearchingNumbers_btn">Select all</button>




<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000000</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000000" data-u-mobile="252633000000"/>

        <input type="hidden" name="phone" value="252633000000">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000001</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000001" data-u-mobile="252633000001"/>

        <input type="hidden" name="phone" value="252633000001">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000002</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000002" data-u-mobile="252633000002"/>

        <input type="hidden" name="phone" value="252633000002">

        <span class="checkmark"></span>
    </div>
</label>
<div id="demo"></div>

Update

Now the complete multiple numbers will be searched with a space in between

The for inside the function

for each one of your checkboxes you set the checked value if the allNumbers list includes the expected value. false otherwise.

let container22 = document.getElementsByClassName('container22');
let container22_Length = container22.length;

let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
let allNumbers = document.getElementById('allNumbers');



SearchingNumbers_btn.addEventListener("click", refree);

function refree() {
  var inputs = document.getElementsByClassName("checkbox_inputs");
  var allNumbers = document.getElementById("allNumbers").value.trim().split(" ");
  document.getElementById("demo").innerHTML = allNumbers
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].checked = allNumbers.includes(inputs[i].value);
  }
}
/* The container */

.container22 {
  position: relative;
  display: block;
  width: 70%;
  padding: 16px;
  background-color: white;
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 200ms ease-in-out;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 20px;
}


/* Hide the browser's default checkbox */

.container22 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 55px;
  /*height: 25px;
  width: 25px;*/
  background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container22:hover input~.checkmark {
  background-color: #f0d128;
}


/* When the checkbox is checked, add a blue background */

.container22 input:checked~.checkmark {
  background-color: #C61D1D;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container22 input:checked~.checkmark:after {
  display: block;
  top: 7px;
}


/* Style the checkmark/indicator */

.container22 .checkmark:after {
  left: 24px;
  top: 36px;
  width: 10px;
  height: 27px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<input type="text" name="" id="allNumbers" />

<button id="SearchingNumbers_btn">Select all</button>




<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000008</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000008" data-u-mobile="252633000008"/>

        <input type="hidden" name="phone" value="252633000008">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000001</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000001" data-u-mobile="252633000001"/>

        <input type="hidden" name="phone" value="252633000001">

        <span class="checkmark"></span>
    </div>
</label>


<label class="container22" style="background-color: #96e676;">
    <div style="margin-left: 50px;">
        <div>252633000007</div>
        <input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="252633000007" data-u-mobile="252633000007"/>

        <input type="hidden" name="phone" value="252633000007">

        <span class="checkmark"></span>
    </div>
</label>
<div id="demo"></div>
Rana
  • 2,500
  • 2
  • 7
  • 28
  • thanks for your reply, but i want (for example if i search two numbers like 252633000000,252633000001 and more) i want to checked these two numbers in html not only one phone number every time, i want to check mutliple result, how can i do that? – Mohammed Oct 16 '21 at 21:26
  • then you can use a certain separator that may be ` ` (space), `,` (comma), `;`(don't know name) . And split the values on these separators which are then entered into an array which will search for telephone number and if found will `check` all the matched input separately `input` – Rana Oct 17 '21 at 07:21
  • Rana, could you explain in code above please, i tried that but it is not working? – Mohammed Oct 17 '21 at 07:36
  • Perfect the code is working, thank you very much Rana – Mohammed Oct 17 '21 at 22:33
  • No problem , if answer has helped you , you can mark it as accepted and can also upvote – Rana Oct 18 '21 at 07:12