Handling multiple checkboxes functionality with a single checkbox using jQuery

If you want to delete multiple records from a page at one click then, the best way is just put a check box in front of every record. This check box when checked will perform the operation on the corresponding record. To perform operations on all rows

on a page, you need a checkbox at the top which when checked will check all the checkboxes on the page and perform operations on all records on a single click.
There is a small script using jQuery which you can use to perform this task.

   $('#chkall').click(function(){
		if($(this).is(':checked')){
			$('input[type="checkbox"]').attr('checked', 'checked');
		}
		else{
			$('input[type="checkbox"]').removeAttr('checked');
		}
	});

In the above script ‘chkall’ is the id of the checkbox which when checked will check all the checkboxes on the page.

Now in your HTML just create a form which contains all the checkboxes. Give a class or id to the form.
Give a unique dynamic id to the checkboxes within the form.
Look at the HTML for all this :

<form id="main_frm" method="post">
/** This following checkbox will check/uncheck all checkboxes on the page */ 
<input id="chkall" class="chkall" name="chkall" type="checkbox" />    
 
<?php while ( condition) {  ?>
<input name="chk[]" type="checkbox" value="&lt;?php print $row['unique_id']; ?&gt;" />
/** place your code here  **/
<!--?php } ?-->
</form>

Now you need a little jQuery code to fetch all the data in a php page. Suppose you want to apply discount of 10% to the selected products. There is a dropdown for the discount value and a apply button next to it. Suppose the apply button has id equals to apply_discount. What you want is clicking on the apply button will apply the selected discount to the checked products. In the code I have used jquery serialize method which encodes a set of form elements as a string for submission. Here is the jQuery code for this:

$('#apply_discount').click(function() {
		var selectedVal = $('#discount_select').val();
		var data=$("#main_frm").serialize();
		$.ajax( {
			url:'discount.php?select='+selectedVal,
			data:data,
			type:'POST',
			success:function(data)
			{
				window.location.reload();
			}
		});
	});

In discount.php file you will get the checked chekboxes id by print out the POST[chk] and selected discount value by print the GET array.

        $checked_ids= $_POST['chk'];
        $discount_value=$_GET['select'];
        foreach( $checked_ids as $key=&gt;$pid ) {
             /** write your query here to apply the discount to the selected products **/
        }

This is the way I am using when I want such functionality. There could be many ways to do this. Just share your comments, views, feedback so that we come across with more simple ways.

Comments
  1. ona
    • Lavonn
  2. Dollie
  3. Hamber
  4. Sous
  5. Buy PHP Script

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Skip to toolbar