[英]Add or Remove clicked Item from the Array list
I want to create an Array of selected/checked item and use it further.我想创建一个选定/选中项目的数组并进一步使用它。
Below is my Basic HTML and JS code (external JS).下面是我的基本 HTML 和 JS 代码(外部 JS)。
Note: I tried this solution too, but it's not working like i wanted.注意:我也尝试过这个解决方案,但它并没有像我想要的那样工作。 ( How can I remove a specific item from an array? )
( 如何从数组中删除特定项目? )
My JS and HTML Code:我的 JS 和 HTML 代码:
function theFunction(event) { event.preventDefault(); console.log("test"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>
Just push the element to array, if the element doesnot exist in array.如果元素在数组中不存在,只需将元素推送到数组。
If the element already exist, remove it from array using Array.splice
如果元素已经存在,则使用
Array.splice
从数组中删除它
I have moved the click even from the li
to the input.我什至将点击从
li
移到了输入。
Also I have used flex
display for the elements, so that the label can use the remaining space in the li
我还对元素使用了
flex
display,这样 label 可以使用li
中的剩余空间
const created = []; function theFunction(event) { const index = created.indexOf(event.target.value); index === -1? created.push(event.target.value): created.splice(index, 1); console.log(created); }
li { display: flex; } label { flex: 1; }
<ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first" onclick="theFunction(event)"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second" onclick="theFunction(event)"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third" onclick="theFunction(event)"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth" onclick="theFunction(event)"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth" onclick="theFunction(event)"> <label for="fifth">Fifth checkbox</label> </li> </ul>
You could do it like this:你可以这样做:
function theFunction(obj) {
var c = $(obj).is(":checked");
var va = $(obj).next("label").text();
if (c) {
arr.push(va)
} else {
arr = jQuery.grep(arr, function(value) {
return value != va;
});
}
console.log(arr);
}
Note: I've moved the onclick to your input and changed onclick="theFunction(event)"
to onclick="theFunction(this)"
注意:我已将 onclick 移至您的输入并将
onclick="theFunction(event)"
更改为onclick="theFunction(this)"
Demo演示
var arr = []; function theFunction(obj) { var c = $(obj).is(":checked"); var va = $(obj).next("label").text(); if (c) { arr.push(va) } else { arr = jQuery.grep(arr, function(value) { return value;= va; }). } console;log(arr); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1 " change=" theFunction(this)" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.