刀片檔案
<table class="table table-borderless">
<thead>
<tr>
<th> </th>
<th> Name </th>
<th> ph </th>
<th> email </th>
<th> reg no </th>
</tr>
</thead>
@foreach ($studentlist as $list)
<tr>
<td>
<div class="checkbox p-0 mr-0">
<input type="checkbox" value="{{ $taxList->studentid }}" name="checkbox[]"
id="checkbox-in-{{ $list->studentid }}" class="multi-select-tax">
<label for="checkbox-in-{{ $taxList->studentid }}" class="cr PRAV01-checkbox"></label>
</div>
</td>
<td> {{ $taxList->studenName }} </td>
<td> {{ $taxList->studentphnuumber }} </td>
<td> {{ $taxList->email }} </td>
<td> {{ $taxList->Regno }} </td>
</tr>
@endforeach
</tbody>
</table>
<label>Students</label>
<input type="text" class="form-control" multiple="multiple" id='student-id' name="student">
<button class="btn btn-primary ">Add</button>
有5五個學生。
如果我使用復選框選擇（多選）選擇第二個和第三個學生。所選學生 ID 應存盤在輸入欄位（id=student-id）中2,3
如果我取消選擇意味著值應該被洗掉。
我如何在Jquery或JavaScript的幫助下執行此方法。
我嘗試了2種方法，但我沒有得到？
uj5u.com熱心網友回復：
https://codepen.io/medilis/pen/abVGpzL
<label for="checkbox1"> 1 </label>
<input type="checkbox" name="checkbox1" id="1"> <br>
<label for="checkbox2"> 2 </label>
<input type="checkbox" name="checkbox2" id="2"> <br>
<label for="checkbox3"> 3 </label>
<input type="checkbox" name="checkbox3" id="3"> <br>
<label for="checkbox4"> 4 </label>
<input type="checkbox" name="checkbox4" id="4"> <br>
<label for="checkbox5"> 5 </label>
<input type="checkbox" name="checkbox5" id="5"> <br>
<label>Students</label>
<input type="text" class="form-control" multiple="multiple" id='student-id' name="student">
const multiInput = document.querySelector("#student-id");
const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", (e) => {
const currentCheckbox = e.target;
let currentMulti;
if (multiInput.value === "") {
currentMulti = [];
} else {
currentMulti = multiInput.value.split(",");
}
if (currentCheckbox.checked) {
currentMulti.push(currentCheckbox.id);
multiInput.value = currentMulti.join(",");
} else {
multiInput.value = currentMulti
.filter((value) => {
return value !== currentCheckbox.id;
})
.join(",");
}
});
});
請注意，您的 HTML 有一些錯誤，例如不包括</table>結束標記
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/430644.html
標籤：javascript jQuery 拉拉维尔
下一篇：重繪后如何保持復選框處于選中狀態