dongyan6235
2017-11-01 12:35
浏览 120

如果在该div中选择了所有子复选框,则选中/取消选中(全选复选框)

enter image description here

let me try to explain from image,

1.Reservations, Customers are checked under the tab of Rental vehicles.

  1. Now From Rental vehicles tab, both are selected from php code i.e(Reservations, Customers),

  2. So now I want to write a code in document.ready to get checked the SelectAll_Dynamic (Select All checkbox),! because all inner checkboxes (Reservations, Customers) are checked,

  3. if anyone from inner checkboxes(either Reservations or Customers) not checked then SelectAll_Dynamic (Select All checkbox) should be unchecked.

14 is dynamic.! for every new div its gets changed example: 1,4,6,12 unique..

<div id="tabs-14" class="tab-pane  active">  
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="SelectAll_Dynamic" id="14">
                        <b>Select All</b>
                    </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                    <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                </div>
            </div>
        </div>
    </div>
</div>

I want to execute a function after page load, which should check whether all checkboxes are checked or not, apart from the first one which has SelectAll_Dynamic class

If all child checkboxes selected then the parent should get selected how can I achieve that..?

This is the functionality which I have for check/uncheck all

$('.SelectAll_Dynamic').click(function() {
                var select_Id = this.id;
                var checked = $(this).prop('checked');
                $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked);
            });
            $('.tab-pane').find('input:checkbox:not(:first)').click(function() {
                if (!$(this).is(':checked')) {
                    $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false);
                    } else {
                    var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length;
                    var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length;
                    if (checkbox_length == checked_check_box_length) {
                        $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true);
                    }
                }
            });

My expected results are:

<input type="checkbox" class="SelectAll_Dynamic" id="14" checked> //checked

if all child checkboxes are cheked.!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • ds2010630 2017-11-01 13:24
    已采纳

    You need to do it like below:-

    $(document).ready(function(){
      $('.tab-pane').each(function(){
        var checkbox_length = $(this).find('input:checkbox:not(:first)').length;
        var checked_check_box_length = $(this).find('input:checkbox:not(:first):checked').length;
        if (checkbox_length == checked_check_box_length) {
          $(this).find('input:checkbox:first').prop('checked', true);
        }
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="tabs-14" class="tab-pane  active">  
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="SelectAll_Dynamic" id="14">
                            <b>Select All</b>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    
    已采纳该答案
    打赏 评论
  • duanhuchang5056 2017-11-01 12:59

    $(document).ready(function() {
    var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)");
    var flag = true;
    $.each(allCheckboxes, function( i, val ) {
      if($(val).prop('checked') == false)
            flag = false;
    });
    
    if(flag)
      $('.SelectAll_Dynamic').prop('checked', true);
    
    $('.SelectAll_Dynamic').click(function() {
                    var select_Id = this.id;
                    var checked = $(this).prop('checked');
                    $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked);
                });
                $('.tab-pane').find('input:checkbox:not(:first)').click(function() {
                    if (!$(this).is(':checked')) {
                        $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false);
                        } else {
                        var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length;
                        var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length;
                        if (checkbox_length == checked_check_box_length) {
                            $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true);
                        }
                    }
                });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="tabs-14" class="tab-pane  active">  
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="SelectAll_Dynamic" id="14">
                            <b>Select All</b>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    Add the below code in your $(document).ready function whick checks if all other checkboxes are checked then check the Select all checkbox.

    var allCheckboxes = $('.SelectAll_Dynamic').closest('div[id^="tabs-"]').find('input:checkbox').not(":eq(0)");
    var flag = true;
    $.each(allCheckboxes, function( i, val ) {
      if($(val).prop('checked') == false)
            flag = false;
    });
    
    if(flag)
      $('.SelectAll_Dynamic').prop('checked', true);
    
    </div>
    
    打赏 评论
  • dqt83336 2017-11-01 13:39

    function SelectAll_Dynamic(){
        if($('.SelectAll_Dynamic').is(':checked')){
            //alert('if');
            $( "input" ).prop( "checked", true );
        } else {
            //alert('else');
            $( "input" ).prop( "checked", false );
        }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="tabs-14" class="tab-pane  active">  
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="SelectAll_Dynamic" onclick="SelectAll_Dynamic();" id="14" checked>
                            <b>Select All</b>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="41" checked="">Reservations</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" name="pages[]" value="52" checked="">Customers</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    
    打赏 评论

相关推荐 更多相似问题