英文:
Javascript select all on dropdown with checkbox and search
问题
Here is the translated content:
我有一个复选框下拉菜单，其中包含搜索和全选功能。它们都运作良好，但问题是，当我搜索时，我希望“全选”仅选择显示的复选框，当前在搜索后，如果我点击“全选”，它仍然选择了所有复选框。
这是我的HTML代码：
<div id="dropdownSearch" class="hidden bg-white rounded-lg shadow w-60" style="z-index: 999;">
<div class="p-3">
<label for="input-group-search" class="sr-only">搜索</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="myInput" onkeyup="filterFunction()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="搜索用户">
</div>
</div>
<div class="ml-4 flex items-center p-1 rounded hover:bg-gray-100">
<input id="checkbox-item-14" onchange="selectAll()" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">全选</label>
</div>
<ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
@foreach($mids as $mid)
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100">
<input id="merchant" name="merchant[]" type="checkbox" value="{{$mid->mid_id}}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded">{{$mid->mid_name}}</label>
</div>
</li>
@endforeach
</ul>
</div>
这是我的JavaScript代码：
<script>
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
console.log(filter);
div = document.getElementById("getMerchant");
a = div.getElementsByTagName("li");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function selectAll(){
if($('#checkbox-item-14').is(':checked')){
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = true;
}
}else{
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = false;
}
}
}
</script>
希望这对你有帮助。
英文:
I have a checkbox dropdown that has a search and select all.
They both work great, the thing is when i search, i would like the select all to only select all the displayed checkboxes, right now after a search and i click select all it still selects every box.
Here is my html
<div id="dropdownSearch" class="hidden bg-white rounded-lg shadow w-60" style="z-index: 999;">
<div class="p-3">
<label for="input-group-search" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="myInput" onkeyup="filterFunction()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 " placeholder="Search user">
</div>
</div>
<div class="ml-4 flex items-center p-1 rounded hover:bg-gray-100">
<input id="checkbox-item-14" onchange="selectAll()" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Select All</label>
</div>
<ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
@foreach($mids as $mid)
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="{{$mid->mid_id}}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">{{$mid->mid_name}}</label>
</div>
</li>
@endforeach
</ul>
</div>
Here is my Javascript
<script>
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
console.log(filter);
div = document.getElementById("getMerchant");
a = div.getElementsByTagName("li");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function selectAll(){
if($('#checkbox-item-14').is(':checked')){
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = true;
}
}else{
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = false;
}
}
}
</script>
答案1
得分: 0
为了在搜索时保留全选选项，请考虑从索引1开始循环for，这样可以跳过第一个<li>，包含全选选项的<li>：
for (i = 1; i < a.length; i++) {
要使全选仅对当前筛选的项目起作用，请首先使用hidden类而不是使用style属性。这样可以更容易地不选择隐藏的项目：
a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
然后在切换全选复选框时，选择不隐藏的<input>元素：
var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]");
将所有内容整合在一起：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
console.log(filter);
div = document.getElementById("getMerchant");
a = div.getElementsByTagName("li");
for (i = 1; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
}
}
function selectAll() {
var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]");
var checked = $('#checkbox-item-14').is(':checked');
for (var i = 0; i < ele.length; i++) {
ele[i].checked = checked;
}
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="dropdownSearch" class="bg-white rounded-lg shadow w-60" style="z-index: 999;">
<div class="p-3">
<label for="input-group-search" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="myInput" onkeyup="filterFunction()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 " placeholder="Search user">
</div>
</div>
<ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="checkbox-item-14" onchange="selectAll()" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Select All</label>
</div>
</li>
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover-bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="foo" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">foo</label>
</div>
</li>
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover-bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="bar" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for=&
<details>
<summary>英文:</summary>
To keep the *Select All* option when searching, consider starting the `for` loop from index `1`, so that it skips the first `<li>`, the `<li>` that contains the *Select All* option:
```js
for (i = 1; i < a.length; i++) {
For the Select All to only work for the currently filtered items, first, use the hidden class instead of using the style attribute. This will make it easier to not select the hidden items:
a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
Then when toggling the Select All checkbox, select checkbox <input> elements that are not hidden:
var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]");
Putting it all together:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
console.log(filter);
div = document.getElementById("getMerchant");
a = div.getElementsByTagName("li");
for (i = 1; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
}
}
function selectAll() {
var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]");
var checked = $('#checkbox-item-14').is(':checked');
for (var i = 0; i < ele.length; i++) {
ele[i].checked = checked;
}
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="dropdownSearch" class="bg-white rounded-lg shadow w-60" style="z-index: 999;">
<div class="p-3">
<label for="input-group-search" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="myInput" onkeyup="filterFunction()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 " placeholder="Search user">
</div>
</div>
<ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="checkbox-item-14" onchange="selectAll()" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Select All</label>
</div>
</li>
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="foo" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">foo</label>
</div>
</li>
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="bar" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">bar</label>
</div>
</li>
<li>
<div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
<input id="merchant" name="merchant[]" type="checkbox" value="baz" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 ">
<label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">baz</label>
</div>
</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论