Question

我创建了自定义单选按钮，这些按钮将根据用户选择在线状态部分是或否。但是，当我单击第一个用户时，状态部分将无法单击下一个用户。

这是视图

这是我的查看代码

<table>
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>
                <center>Presence</center>
            </th>
        </tr>
    </thead>
    <tbody>
    @php
        $i=1;
    @endphp
    @foreach ($employee as $employee)
    <tr>
        <td>{{ $i }}</td>
        <td>{{ $employee->name }}</td>
        <td>
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            <input type="radio" id="radio1" name="presence" value="Y" />
            <label for="radio1">
                <font color="#00B01D">
                <i class="fas fa-check"/> Yes</font>
            </label>
            <input type="radio" id="radio2" name="presence" value="N" />
            <label for="radio2">
                <font color="#FF0000">
                <i class="fas fa-times"/> No</font>
            </label>
        </td>
    </tr>
    @php
        $i++;
    @endphp
    @endforeach
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('input[type="radio"]').click(function(){
        var presence = $(this).val(); 
        $.ajax({  
            url:"{{ url('http://localhost/admin/presence/add') }}",
            method:"POST",
            data:{
                presence:presence,
                _token: $('input[name=_token]').val()
            },
            success:function(result){
            }
        });
    });
});
</script>

这是我的控制器功能

public function addprespost(Request $request)
{
    $dataz = [
        'presence' => $request->input('presence'),
    ];
    DB::table('presence')->insert($dataz);
    return redirect('/admin/presence/add');
}

这是成功插入数据后的表

Answer 1

对于您生成的每个状态行，您需要为广播组提供唯一的名称。当前，每一行的名称都是相同的，因此所有单选按钮都属于同一组。像这样的东西就足够了：

<input type="radio" id="radio1" name="presence-{{$i}}" value="Y" />
<label for="radio1">
    <font color="#00B01D">
        <i class="fas fa-check"/> Yes</font>
</label>
<input type="radio" id="radio2" name="presence-{{$i}}" value="N" />
<label for="radio2">
    <font color="#FF0000">
        <i class="fas fa-times"/> No</font>
</label>

Radio buttons

Answer 2

用于单选按钮和复选框的jQuery事件侦听器是change事件侦听器。请参见jquery api documentation。具体来说就是本段。

change事件在其值更改时发送到元素。此事件仅限于元素，框和元素。对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发该事件，但是对于其他元素类型，该事件将推迟到该元素失去焦点之前。 >

所以您必须像这样修改脚本：

$(document).ready(function() { 
    $('input[type="radio"]').change(function(){ 
        var presence = $(this).val(); 
        $.ajax({ 
            url:"{{ url('http://localhost/admin/presence/add') }}", 
            method:"POST", 
            data:{ 
                presence:presence, 
                _token: $('input[name=_token]').val()
            }, 
            success:function(result){ } 
        }); 
    }); 
});

但是，以这种方式异步将更新数据发送到数据库可能对性能没有好处。看到我对原始帖子的评论。

Laravel使用每个用户的单选按钮选择多个值

2 个答案: