Saturday, 3 September 2016

Multi select Checkbox

We stuck at some situation where checkboxes are generated dynamically- generally when we fetch data from database- and we have to select  some row are all rows and do some operation on that.

If we don't have multi select checkbox option we will have to select one by one and if there are too many data it will be time-consuming and irritating.

To do this we require Jquery with javascript.

1. Add jquery.min.js to file-

<script src="js/jquery.min.js"></script>

2. Use javascript to file-

$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });
    
    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});

3. Then create master checkbox-

<input type='checkbox' id='select_all' />

4. Now another checkboxes will be-


<input name='rid[]' type='checkbox' class='checkbox' value='<?php echo $row[0];?>' />

All done .

It looks like-


 




No comments:

Post a Comment

Change image source dynamically on hyperlink

 Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folde...