Like 1,2 or one, two checks the first and second boxes.
I need a solution using Javascript or JQuery
<input type="text" id="select" value="1,2" placeholder="type any thing">
<button id=submit> click </button>
<table>
<thead>
<tr>
<th> </th>
<th> Name </th>
<th> ph </th>
<th> email </th>
<th> reg no </th>
</tr>
</thead>
<tbody>
@foreach ($studentlist as $list)
<tr>
<!-- THE CHECKBOXES -->
<td>
<div class="checkbox p-0 mr-0">
<input type="checkbox" value="{{ $list->studentid }}" name="checkbox[]"
id="checkbox-in-{{ $list->studentid }}">
<label for="checkbox-in-{{ $list->studentid }}"></label>
</div>
</td>
<td> {{ $list->studenName }} </td>
<td> {{ $list->studentphnuumber }} </td>
<td> {{ $list->email }} </td>
<td> {{ $list->Regno }} </td>
</tr>
@endforeach
</tbody>
</table>
const controlInput = document.querySelector("#select");
const checkboxes = document.querySelectorAll("input[type=checkbox]");
// Initial check
check(controlInput);
// Check on update
controlInput.addEventListener("keyup", (e) => {
check(e.target);
});
/**
* @param {HTMLInputElement} controlInput
*/
function check(controlInput) {
input = cleanInput(controlInput.value);
const targetCheboxesIds = input.split(",");
checkboxes.forEach((box) => {
if (targetCheboxesIds.includes(box.id)) {
box.checked = true;
} else {
box.checked = false;
}
});
controlInput.value = input;
}
/**
* @param {string} input
*/
function cleanInput(input) {
// Removing white space and letters
return input.replaceAll(/\s+/g, "").replaceAll(/[a-zA-Z]/g, "");
}<label>Students</label>
<input type="text" class="form-control" id="select" placeholder="type any thing" value=",3,5">
<div>
<label for="checkbox1"> 1 </label>
<input type="checkbox" name="checkbox1" id="1">
</div>
<div>
<label for="checkbox2"> 2 </label>
<input type="checkbox" name="checkbox2" id="2">
</div>
<div>
<label for="checkbox3"> 3 </label>
<input type="checkbox" name="checkbox3" id="3">
</div>
<div>
<label for="checkbox4"> 4 </label>
<input type="checkbox" name="checkbox4" id="4">
</div>
<div>
<label for="checkbox5"> 5 </label>
<input type="checkbox" name="checkbox5" id="5">
</div>