check all box via ajax

[Shadowing]

I'm so stuck atm :(I know how to do a check all check box but doing it using ajax is a differant story.

$return = "<form name='frm1' id='frm1' action='' method='post'15.onsubmit='javascript:return submitIt('frm1')'> <input type='checkbox' name='checkAll' value='x' id='checkall' onclick='checkUncheckAll('association[]', this.checked)' />

I have check boxes being echoed in with a id assigned to them

<td><input type='checkbox' name='association[]' value= '$sent_id'  /></td>"

I"m converting the whole page to a string and returning it via ajax

echo json_encode(array("display" => $return));

I was trying to advoid the onclick and try something like

$("input#checkAll").live('click' ,function(event) { 	var test = $("association[]").attr("name"); 	 checkUncheckAll(test, this.checked);  });

check all function

function checkUncheckAll(groupName, checkState){    var groupObj = document.forms[0].elements[groupName];    var groupLen = groupObj.length;	   for(var groupIdx=0; groupIdx<groupLen; groupIdx++)     {	      groupObj[groupIdx].checked = checkState;      }      return;   } 

[dsonesuk]

$("#checkAll").live('click' ,function(event) { event.preventDefault();	    //var test = $("association[]").attr("name"); 	    // checkUncheckAll(test, this.checked);               $('input[name="association[]"]').attr('checked', 'checked');         });

[Shadowing]

nice thanks dsonesuk how do I grab the ids of each one and put it into array so i can send it back to my php script as an array of the ones that was checked. I need to look up this attr thing for jquery lol. didnt realize there was two parameters for it

[dsonesuk]

Use jquery .each() to loop through the same selector ref $('input[name="association[]"]') and store .attr("id") in to an array.

[Shadowing]

I think im close but idk lolwhen i look at jquery i think php and the syntax is just a mess for melooked up the the each loop on jquery's website but having troubles. If this was php id have it no problem

$('input[name="association[]"]').each(function(index) {  	var array[] = index.attr("id");	  });  alert(array[]);

[dsonesuk]

$("#checkAll").live('click' ,function(event) {event.preventDefault();				$('input[name="association[]"]').attr('checked', 'checked');		var array = new Array();		$('input[name="association[]"]').each(function() {		  var index_ref=$(this).index()	   array[index_ref] = $(this).attr("id");	  alert(array[($(this).index())] )  });  });

Edited June 2, 2012 by dsonesuk

[Shadowing]

lol dsonesuk i was like way off, so when I do index after function. its pretty much making a function called index? i can never understand that.any chance you could add some comments for each line. When i see index there i think its like a callback? run everything index is attached to after function lol? Every time i see a word with () next to it I think function but apparently this is differant in java script?

each(function(index) {

anyways so seperated the code and have this below

	  var array = new Array();	  $('input[name="association[]"]').each(function(index) {		var index_ref=$(this).index()		array[index_ref] = $(this).attr("id");		alert(array[($(this).index())] )	  });	});

This gives me all the id's of every box rather its checked or unchecked.so now i need to figure out how to tell or just only grab the ones that are checked. Cause im assigning it to a seperate button. this is for a mail system so sending all checked to trash etc...

[dsonesuk]

$("#checkAll2").live('click' ,function(event) {event.preventDefault(); 		var array = new Array();		$('input[name="association[]"]:checked').each(function() { //loops through all inputs with same name that are checked ':checked'		//$('input[name="association[]"]').not($('input[name="association[]"]:checked')).each(function() { //loops through all inputs with same name that are NOT checked		  var index_ref=$(this).index() // .index() is jquery function that will return index ref of group of elements as defined by the selector used for the each function	   array[index_ref] = $(this).attr("id"); //array will use index ref to store id ref using variable that retrieves element index ref using function index()	  alert(array[($(this).index())] )  }); 	});

Edit: index argument in functioin is not required

$('input[name="association[]"]').each(function(index) { 

should be

$('input[name="association[]"]').each(function() {

Edited June 2, 2012 by dsonesuk

[Shadowing]

Nice that works. geez jquery is so amazing lol. i really need to get more in tuned with it.As always thanks alot dsonesuk! oh and thanks again for taking time out to place comments on that Edit: nice you did a line of them not being checked also

Edited June 2, 2012 by Shadowing

[Shadowing]

sigh cant believe im still having problems lol for starters how do i alert the array in a way so i can at least see the array like i would use print_r in phpso i can at least see what the array looks like.

var array = new Array();$('input[name="association[]"]:checked').each(function() {var index_ref=$(this).index()array[index_ref] = $(this).attr("id"); }); // does these brackets control the loop?

The problem im having now is I need to beable to read the array outside the last brackets assigned to a variable. assuming the brackets is part of the loop? I guess i could just build a string instead then explode it with php but id like to learn this. Really important stuff Im thinking i can use valueof to see my array but i cant figure out how to read it out side the brackets

Edited June 2, 2012 by Shadowing

[Shadowing]

I tried doing this by wrapping a function around it then returning itbut it returns undefine

function checked_boxes() { var array = new Array(); $('input[name="association[]"]:checked').each(function() {    var index_ref=$(this).index()  array[index_ref] = $(this).attr("id");   }); return array;}var array = checked_boxes(); var value = valueOf(array); alert(value); 

[dsonesuk]

make the array global then you can access it outside document.ready

<script type="text/javascript">/*<![CDATA[*//*---->*/var array = new Array();$(document).ready(function(){$("#checkAll2").live('click' ,function(event) { event.preventDefault();                $('input[name="association[]"]:checked').each(function() {        //$('input[name="association[]"]').not($('input[name="association[]"]:checked')).each(function(index) {          var index_ref=$(this).index()	   array[index_ref] = $(this).attr("id");  }); // end of each()  runthis();    }); // end of click});function runthis(){for(i=0;i<array.length;i++){if(array[i] != undefined){ alert(array[i]); }}}/*--*//*]]>*/</script>

[Shadowing]

ahh nice kewl now im reading something out side the function lol. the runthis function alerts only the last element in the array though. so i'll the variable array to my php script and see what it reads

[Shadowing]

Alright did all that, turns out that the variable array is only one number wierdwhen i do this code below with more then one box checked, it alerts all numbers as its looping through them so the loop is working. but i guess its not adding it to the array

	    $('input[name="association[]"]:checked').each(function() { 				  var index_ref=$(this).index()		   array[index_ref] = $(this).attr("id"); alert(array[($(this).index())] )  }); // end of each()

do we need to assign the index_ref as key? im fine with key starting out at 0 and incrementing so in that case cant we just get rid of the line

var index_ref=$(this).index()

and change bottom line to

array[] = $(this).attr("id"); 

[dsonesuk]

That not going to work, just realised you have to clear the array, or you end up with all checked being listed all the time as each is checked. try this

<script type="text/javascript">/*<![CDATA[*//*---->*/var array = new Array();$(document).ready(function(){$("#checkAll2").live('click' ,function(event) { event.preventDefault();var count=0;array.length=0;        $('input[name="association[]"]:checked').each(function() {        array[count] = $(this).attr("id");        count++;  }); // end of each()  runthis();    }); // end of click});function runthis(){for(i=0;i<array.length;i++){ alert(array[i]);}}/*--*//*]]>*/</script>

[Shadowing]

nice all working now I was able to put the array variable back inside the button click also by passing the variable through the function agrumentsI just want to point out ever since you showed me that alert for error on data return has proved quite useful lol thanks a ton. at least have a working example to fall back on to look at in the future too.

$(function(){ $("input.bulk_trash").live('click' ,function(event) {event.preventDefault(); var array = new Array();var count=0;array.length=0;		$('input[name="association[]"]:checked').each(function() { 		array[count] = $(this).attr("id");		count++;  });   bulk_trash(array);	}); function bulk_trash(array) { $.ajax({		     url: "messages/inbox.php?functions=bulk_trash",		     type: 'POST',		     dataType: 'json',		     data: {		array: array   },     error: function(){	alert("Oops... seems to be problem retrieving data. function bulk_trash") 	},	success: function(response) {	$('div.message_action').html(response.display);	}}); });}});

Edited June 2, 2012 by Shadowing

[Shadowing]

oh i know what i was going to ask you earlier what is this for

/*<![CDATA[*//*---->*/  /*--*//*]]>*/