如何使用 jQuery 和使用 Laravel 变量检查复选框

Question

我想知道如何检查与我的 jQuery 搜索功能找到的学生关联的复选框。要理解这里的是我的“Ajax”请求。目前，它在 html“span”中显示我的搜索结果，但我只想选中与搜索关联的复选框。

这是我执行请求的 jQuery 代码：

const { post } = require("jquery");

const form = document.getElementById('search-codebar-form');

form.addEventListener('submit', function (e) {
    e.preventDefault();

    const token = document.querySelector('meta[name="csrf-token"]').content;
    const url = this.getAttribute('action');
    const q = document.getElementById('q').value;
   

    fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': token
        },
        method: 'post',
        body: JSON.stringify({
          q: q
        })
    }).then(response =>  {
        response.json().then (data => {

            // const newid = "student-${{id}}";

             document.getElementById(newid).checked = true;
            var data = {};
            data = "{{ $student->id }}";
    $("#student-.data").prop("checked", true); // And here I'm trying to take the id of the checkbox
 and check it.Watch out because the id change with the result because it is "student-{{ $student->id }}"
----------------------------------------------------------------
           // const etudiant = document.getElementById('etudiant');
            etudiant.innerHTML = '';


            Object.entries(data)[0][1].forEach(element =>{
               etudiant.innerHTML = `<span>${element.first_name}</span>`// At the moment
 I have this .So this empty my "div" and show the name of the result.
              
            });
        })
    }).catch(error =>{
        console.log(error)
    })

});

这是我的表单，此输入位于我的 .blade 中 标签 '' 在我的代码中要高得多，但我只想向您展示最重要的内容。

<div id="etudiant">         
                  @foreach ($students as $student)
                   <tbody class="bg-white divide-y divide-gray-200">
                      <tr>
                        <td class="px-6 py-4 whitespace-nowrap">                
                              <div class="text-sm font-medium text-gray-900">
                      {{$student->last_name}}
                          </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                          {{$student->first_name}}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                          {{$student->uuid}}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">      
                             <input class="form-check-input" type="checkbox"  name="students[]" type="checkbox" value="{{ $student->id }}" id="student-{{ $student->id }}" />    
                            </div>
                        </td>
                      </tr>
                    </tbody> 
                   
                    @endforeach 
                       </div>

如果您想要更多，这是与请求关联的 Laravel 控制器。

public function search_codebar(request $request): JsonResponse
    {

      $q = $request->input('q');

      $students = Student::where('uuid', 'like' ,$q )->get();

      return response()->json([
        "students" => $students]);
    }
    public function list_appel($id){
    return view('list_appel', ["appels" => Appel::all()]);
    
    }

所以我的 jQuery 代码中的“q”在这里定义来搜索学生的“uuid”。 我希望你能理解我的问题是什么。 多谢 ！

https://i.sstatic.net/1eqcK.png

Answer 1

data = "{{ $student->id }}";

似乎不属于那里。它不是 JavaScript 的一部分，将在页面加载时填充。这不太可能是您想要的

如果您的服务器返回包含学生数组并具有 uuid 的 JSON，那么您可以执行类似的操作

 }).then(response => response.json())
  .then (data => {
    data.forEach(student => $(`#student-${student.id}`).prop("checked", true))

Answer 2

我找到了答案：

.then((response) => response.json())
        .then((data)=>{
const students = data.students
students.forEach((student) => {
                $(`#student-${student.id}`).prop("checked", true)
            
            })

        })  
        .catch((error) => {
            console.log(error);
        });
    });

我的数据是一个对象而不是数组！
所以我不得不使用 .then((data)=>{ const Students = data.students