时间戳

首页 > 解决方案 > 如何从搜索输入中搜索页面中的特定数据并选择 Javascript 中复选框的所有搜索数据

javascript - 如何从搜索输入中搜索页面中的特定数据并选择 Javascript 中复选框的所有搜索数据

问题描述

正如我在主题标题中所描述的那样。我想帮助我了解如何从搜索输入中搜索特定数据（例如电话号码：252633000000、252633000001），在我单击全选按钮后，我只想选择搜索到的电话号码的所有复选框。我怎样才能做到这一点？

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);

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

});

标签： javascripthtmlcss

解决方案

check您可以添加如下代码段中的功能，该功能将匹配电话中的任何号码，如果其中一个号码匹配，它将input

下面的代码片段仅用于演示如何开始您可以在未找到搜索或为空时添加更多功能以及根据需要更多

您可以从这里获得一些进一步的帮助，类似但带有文本搜索

核心部分是

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;
    }
  }
}

让我们看看这是如何工作的

单击搜索 btn 时

  1. 它将运行一个函数refree（可以命名任何）
  2. allinput都使用一个变量调用reader，我们将使用该变量从每个变量中获取值input
  3. for应用循环作为每个输入的检查器，循环运行input（电话号码）次（此处为 3）。
  4. 值 frominput被带入readerTextvariable 并且searchvalue 被带入reedvariable 。（变量可以任意命名）
  5. 现在运行的条件if search不是空的true，第一条语句将运行，否则第二条语句将运行
  6. 当语句true再次出现时，将通过一个条件来检查是否存在搜索到的数字（这里匹配单个数字，而不是检查输入，可以更改为仅在匹配完整数字时检查）。

这里的主要工作是.indexOf在所有数字中搜索搜索查询

如果您希望匹配完整的号码而不是将条件更改
readerText.indexOf(reed) > -1为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>

更新

现在将搜索完整的多个数字，中间有一个空格

for函数内部

checked如果allNumbers列表包含预期值，则为每个复选框设置值。false除此以外。

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>

推荐阅读