blade.file
<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>
There are 5 five students.
If I select 2nd and 3rd student with checkbox select (multi select).the selected student id should store in input field(id=student-id) as 2,3
If I unselect means value should removed.
How I can do this method with help of Jquery or JavaScript.
I tried 2 method but I didn't get ?
https://codepen.io/medilies/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(",");
}
});
});
Note that your HTML have some errors like not including the </table> closing tag