Question

我正在尝试这样做，当用户检查至少一个框时，如果没有，则图标必须显示，它隐藏。

使用我的代码，当我选中#master复选框时，图标会显示，但当我选择每行显示的other checkbox时，它不会显示。

为什么会这样？

HTML：

 <table  id="users-table" class="table table-hover table-condensed" style="width:100%">
    <thead>
        <tr>
           <th><input type="checkbox" id="master"></th>
            <th>Category</th>
            <th>Description</th>
            <th>Number of Items</th>
            <th>Action</th>
        </tr>
    </thead>
  </table>   


<script type="text/javascript">
$(document).ready(function() {

        oTable = $('#users-table').DataTable({
            "processing": true,
            "serverSide": true,
            "bProcessing":false,
            "bSort":false,
            "ajax": "{{ route('datatable.getcategories') }}",
            "columns": [
                {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},      
                {data: 'name', name: 'name'},
                {data: 'action', name: 'action', orderable: false, searchable: false}        
            ],
        });
});

</script>

控制器：

$stduents= Student::all();
        return Datatables::of($student)->addColumn('checkbox', function ($std) {
            return  '<input type="checkbox" class="sub_chk" data-id="'.$std->id.'">';
   })->make(true);

我选中我的复选框：

<script type="text/javascript">
    $(document).ready(function () {

        $("i[type='icon']").css('display','none'); //set style explicitly

        $('#master').on('click', function(e) {
         if($(this).is(':checked',true))  
         {
            $(".sub_chk").prop('checked', true);  
         } else {  
            $(".sub_chk").prop('checked',false);  
         }  
        });



        $('.delete_all').on('click', function(e) {

            var allVals = [];  
            $(".sub_chk:checked").each(function() {  
                allVals.push($(this).attr('data-id'));
            });  

            if(allVals.length <=0)  
            {  
                alert("Please select row.");  
            } 

            else {  



                var check = confirm("Are you sure you want to delete this row?");  
                if(check == true){  

                    var join_selected_values = allVals.join(","); 

                    $.ajax({
                        url: $(this).data('url'),
                        type: 'GET',
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data: 'ids='+join_selected_values,

                        success: function (data) {
                            if (data['success']) 
                            {
                                $("#" + data['tr']).slideUp("slow");
                                location.reload();

                                alert(data['success']);
                            } 
                            else if (data['error']) 
                            {
                                alert(data['error']);
                            } 
                            else 
                            {
                                //alert('Whoops Something went wrong!!');
                            }
                        },
                        error: function (data) {
                            alert(data.responseText);
                        }
                    });

                  $.each(allVals, function( index, value ) 
                  {
                      $('table tr').filter("[data-row-id='" + value + "']").remove();
                  });
                }  
            }  
        });

        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm: function (event, element) {
                element.trigger('confirm');
            }
        });

        $(document).on('confirm', function (e) {
            var ele = e.target;
            e.preventDefault();

            $.ajax({
                url: ele.href,
                type: 'GET',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function (data) {
                    if (data['success']) 
                    {
                        $("#" + data['tr']).slideUp("slow");
                        location.reload();

                        alert(data['success']);
                    } 
                    else if (data['error']) {
                        alert(data['error']);
                    } 
                    else 
                    {
                        alert('Whoops Something went wrong!!');
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });

            return false;
        });



    });

    </script>

选择至少一个复选框时显示图标：

    <script>

    $("input[type='checkbox']").click(function() {
    var atLeastOneChecked = false;
    $("input[type='checkbox']").each(function(index) {
      if ($(this).prop('checked'))
        atLeastOneChecked = true;
    });
    if (atLeastOneChecked) {
      $("i[type='icon']").show(); //built-in jquery function
      //...or...
      $("i[type='icon']").css('display','inline-block'); //or set style explicitly
    } else {
      $("i[type='icon']").hide(); //built-in jquery function
      //...or...
      $("i[type='icon']").css('display','none'); //set style explicitly
    }
    });
    </script>

Answer 1

一个简单的例子对我有用 - 无论你遇到什么问题，你都必须提供更多的代码，或者通过自己的一些调试来缩小问题范围。希望这会有所帮助：master and grouped checkboxes all react to click

HTML：

<div id="icon">SEE ME?</div>
<div id="info">Information</div>
<div><input type="checkbox" id="master"></div>
<div><input type="checkbox" name="subset01[]" value="00"></div>
<div><input type="checkbox" name="subset01[]" value="01"></div>
<div><input type="checkbox" name="subset01[]" value="02"></div>
<div><input type="checkbox" name="subset01[]" value="03"></div>
<div><input type="checkbox" name="subset01[]" value="04"></div>
<div><input type="checkbox" name="subset01[]" value="05"></div>
<div><input type="checkbox" name="subset01[]" value="06"></div>
<div><input type="checkbox" name="subset01[]" value="07"></div>
<div><input type="checkbox" name="subset01[]" value="08"></div>
<div><input type="checkbox" name="subset01[]" value="09"></div>

CSS：

#icon{ display: none; }

JS：

$( function(){
  $('#info').text("please click a checkbox");
    $( "input[type='checkbox']" ).click( function(){
    $('#info').html( "you clicked @ "+ new Date().getTime() +" currently "+ $(':checked').length +" checked" ); 
    if( $(':checked').length ){
      $("#icon").show();
    }else{
      $("#icon").hide();
    }
  } );
} );

Answer 2

由于在页面加载$("input[type='checkbox']").click(...)之后添加了复选框，因此不会向其添加事件处理程序。即。

＆＃13;

//will handle clicked events on checkbox existing when this js runs
$('input[type="checkbox"]').click(function() { 
  alert('clicked') 
});

//will handle clicked events on dynamically added checkboxes
$(document).on('click', 'input[type="checkbox"]', function() {
  alert('clicked2');
});

//add new checkbox to page
$('button').click(function() { $('#master').after($('<input type="checkbox" >')) });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="master">
<button type='button'>Add Checkbox</button>

＆＃13;

您要做的是$(document).on('click', 'input[type="checkbox"]', function() { ... }

选中复选框时显示删除图标 - JS

2 个答案: