[英]Add or Remove clicked Item from the Array list
我想創建一個選定/選中項目的數組並進一步使用它。
下面是我的基本 HTML 和 JS 代碼(外部 JS)。
注意:我也嘗試過這個解決方案,但它並沒有像我想要的那樣工作。 ( 如何從數組中刪除特定項目? )
我的 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>
如果元素在數組中不存在,只需將元素推送到數組。
如果元素已經存在,則使用Array.splice
從數組中刪除它
我什至將點擊從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>
你可以這樣做:
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);
}
注意:我已將 onclick 移至您的輸入並將onclick="theFunction(event)"
更改為onclick="theFunction(this)"
演示
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.