Question

我试图根据已检查更新我的复选框值。但是我面临的问题是我无法取消选中旧的复选框。所以当我点击新的复选框时，旧的一个应该取消选中...我使用了laravel平台，其中表头来自数据库，而来自数据库的旧复选框值来了......

这是我的刀片视图：

<table class="table">
    <thead>
        <tr>
          <th>SL No</th>
          <th>Name</th>
            @foreach($roles as $row)         
          <th>{{$row->label}}</th>
            @endforeach
        </tr>
      </thead>
      <tbody>
          <?php $i=1; ?>
             @foreach($users as $user)
               @foreach($user->roles as $row)
                 <tr>
                    <td>{{$i}}</td>
                    <td>{{$user->name}}</td>
                        @foreach($roles as $role)
                    <td>

                        @if($role->role == $row->role)
                          <input type="checkbox" class="myCheckbox" checked=""  >
                        @else 
                          <input type="checkbox" class="myCheckbox">
                        @endif

                    </td>   
                      @endforeach
                   </tr>
                      <?php $i++; ?>
                  @endforeach
                @endforeach
            </tbody>
          </table>

这是我用来检查一个复选框的javascript。

 $('.myCheckbox').click(function() {
    $(this).siblings('input:checkbox').prop('checked', false);
});

任何人都可以帮我找出解决方案吗？

Answer 1

使用单选按钮，或迭代所有复选框，将checked值设置为false，仅检查刚刚单击的复选框。

这是一个例子。

var container = document.querySelector('.container');

container.addEventListener('click', function(evt) {
  [].slice.call(this.children).forEach(function(input) {
    input.checked = false;
  })
  evt.target.checked = true;
})

<div class="container">
  <input type="checkbox"> Foo
  <input type="checkbox"> Bar
  <input type="checkbox"> Baz
</div>

如何使单选按钮以互斥的方式运行

1 个答案: