Question

我在标题中为选中的其他复选框添加了一个复选框，但单击了不在标题上工作的事件。

Javascript代码

$(document).ready(function () {
 $('#example').on('click','.checkAll', function () {
    alert("hi");
    if ($(this).prop('checked')) {
        $('.otherChechBox').prop('checked', true);
        selected = [];
        $(".otherChechBox:checked").each(function () {
            selected.push($(this).val());
        });
    } else {
        $('.otherChechBox').prop('checked', false);
        selected = [];
    }
});
});

HTML代码

  <table id="example" class="table table-striped table-bordered table-fixed-column order-column dataex-column-width">
                        <thead>
                        <tr>
                            <th class="text-center col-md-1"><input class="checkAll" name="agree" id="checkAll" type="checkbox" ></th>
                            <th>#</th>
                            <th>Permission Parent</th>
                            <th>Permission Name</th>
                            <th>Slug</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($permissions as $permission)
                        <tr>
                            <td class="text-center"><input class="otherChechBox" name="agree[]" id="{{$permission->id}}" type="checkbox" value="{{$permission->id}}"></td>
                            <td>{{$permission->id}}</td>
                            <td>{{$permission->permission_parent}}</td>
                            <td>{{$permission->permission_name}}</td>
                            <td>{{$permission->slug}}</td>
                            <td>
                                <a href="{{url('/Admin/permission/edit',$permission->id)}}"><i class="fa fa-edit" style="font-size:20px;"></i></a>
                                <a href="#"><i class="fa fa-trash-o" style="font-size:20px;color:red;"></i></a>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>

我也试过这个

$('#example').on('click','.checkAll', function () {..});

点击事件在<td>中完美运行，但无效<th>

Answer 1

尝试将js代码包装在document.ready函数中。

$(document).ready(function(){
 $('#example').on('click','.checkAll', function () {
    alert("hi");
    if ($(this).prop('checked')) {
        $('.otherChechBox').prop('checked', true);
        selected = [];
        $(".otherChechBox:checked").each(function () {
            selected.push($(this).val());
        });
    } else {
        $('.otherChechBox').prop('checked', false);
        selected = [];
    }
});
});

更新

$(document).ready(function(){
     $('#example').on('click','.checkAll', function () {
        alert("hi");
    });
    });

首先尝试上面的代码，检查事件是否被触发。如果你收到警报，你的js就会出现另一个问题。

更新2

尝试在输入时使用Onclick。

<input class="checkAll" name="agree" id="checkAll" type="checkbox" onclick="checkboxfunction()" >

<script>
function checkboxfunction(){
alert("clicked");
}
</script>

Answer 2

所以，当您点击.checkAll复选框时，是否要检查表格中的所有其他复选框？

请参阅下面的代码段，如果这是你想要的，请告诉我。

＆＃13;

$('#example').on('click', '.checkAll', function() {
  let otherCheck = $('input[type="checkbox"]').not(this)
  otherCheck.prop('checked', this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="table table-striped table-bordered table-fixed-column order-column dataex-column-width">
  <thead>
    <tr>
      <th class="text-center col-md-1">
        <input class="checkAll" name="agree" id="checkAll" type="checkbox"></th>
      <th>#</th>
      <th>Permission Parent</th>
      <th>Permission Name</th>
      <th>Slug</th>
      <th>Action</th>
    </tr>
  </thead>
  
  <input class="" name="" id="" type="checkbox">
  <input class="" name="" id="" type="checkbox">
  <input class="" name="" id="" type="checkbox">



</table>

＆＃13;

Answer 3

我已经想到了，它的工作在下面的片段。

$('#example thead th').on('click','.checkAll', function () {..});

标头上的数据表点击事件无效

3 个答案:

更新

更新2