[RESOLVED] Javascript Checkbox Manipulation but with an array?

[_sh]

I've been using the following script to Check All/Uncheck All checkboxes...

	function Ash_CheckAllCheckboxes(field)
	{
	for (i = 0; i < field.length; i++)
		field[i].checked = true ;
	}

	function Ash_UnCheckAllCheckboxes(field)
	{
	for (i = 0; i < field.length; i++)
		field[i].checked = false ;
	}

...however I've just changed my PHP script so that it renders the checkboxes as an array for the processing script - the consequence of that being that the checkboxes now have a [] after the 'Name', like this

name="checkboxes[]"

...my Javascript no longer works, how can I change the Javascript to get this working?

I also need a javascript function that will check whether any of the checkboxes are checked, if none are checked on submit, I want to warn the user that they haven't made a selection and allow them to OK to continue to the Submit page, or Cancel to stop the post and allow them to check one?

Thanks in advance!

[etully]

This is how I do it. There are probably lots of ways to do what you're looking for. When you use PHP to generate the form, keep doing the name="checkboxes[]" thing. That's fine. But also add in something that says: id="checkbox" or id="checkbox6" (where the last number keeps incrementing). That way, PHP can hear it's input based on the "NAME" attibute and Javascript can refer to the checkboxes based on the "ID" attribute. Something like:

function Ash_UnCheckAllCheckboxes(field)
{
for (i = 0; i < numberOfCheckboxes; i++)
document.getElementById("checkbox" + i).checked = false;
}

Note that in the sample code above, I have referenced a variable that I made up called numberOfCheckboxes. What I usually do is use PHP to create the Javscript that sets that variable. Something like this:

numberOfCheckboxes = <?php print "$x"; ?> ;

[_sh]

Thanks for this mate, almost does it perfectly, but I want to adapt the function example you provided so as to be able to pass the ID of the checkboxes so as to use on different forms, I've got the following so far...

		function Ash_CheckAllCheckboxes(field, numberofcheckboxes)
		{
		for (i = 1; i < numberofcheckboxes; i++)
			document.getElementById(eval(field + i)).checked = true;
		}

And I'm calling it like this...

Ash_CheckAllCheckboxes('CheckboxID_',5)

BUT I'm getting (via Firebug) the error "CheckboxID_1 is not defined", however if I set the field name within the function itself, its working fine - where am I going wrong here? It seems to be going wrong to me in the bit where I'm appending the numeric onto the checkbox ID that is beind passed into the function?

Thanks for your help.

[Salkcin]

Just thought to post another solution on how to check/uncheck all checkboxes in a form without the need of defining element-id's.

Simply give your form a name and then use Javascript to loop thru the elements in the form, if it's a checkbox then check or uncheck it:

Here's an example that demonstrates how it works, ex:

<script type="text/javascript">

function SetCheckBoxes(state)
{

for (var i=0; i < document.myForm.elements.length; i++)
{
	if (document.myForm.elements[i].type == "checkbox")
	{
		document.myForm.elements[i].checked = state;
	}
}

}

</script>



<a href="javascript:SetCheckBoxes(true)">Check All</a> | <a href="javascript:SetCheckBoxes(false)">Uncheck All</a><br />

<form name="myForm" action="" method="post">
<input type="checkbox" name="mybox[]" />Guitar<br>
<input type="checkbox" name="mybox[]" />Bass<br>
<input type="checkbox" name="mybox[]" />Drums<br>
</form>

[_sh]

Salkcin;10908302 wrote:

Just thought to post another solution on how to check/uncheck all checkboxes in a form without the need of defining element-names or id's.

Simply give your form a name and then use Javascript to loop thru the elements in the form, if it's a checkbox then check or uncheck it:

Here's an example that demonstrates how it works, ex:

<script type="text/javascript">

function SetCheckBoxes(state)
{

for (var i=0; i < document.myForm.elements.length; i++)
{
	if (document.myForm.elements[i].type == "checkbox")
	{
		document.myForm.elements[i].checked = state;
	}
}

}

</script>



<a href="javascript:SetCheckBoxes(true)">Check All</a> | <a href="javascript:SetCheckBoxes(false)">Uncheck All</a><br />

<form name="myForm" action="" method="post">
<input type="checkbox" name="mybox[]" />Guitar<br>
<input type="checkbox" name="mybox[]" />Bass<br>
<input type="checkbox" name="mybox[]" />Drums<br>
</form>

Nice solution mate, would it be easy to adapt this so as to be able to pass a form name into the function?

Also, can you help with a function that will Alert the user if no checkboxes are selected for a specific form on submit?

[_sh]

Thanks for all your help and assistance here guys, in the end, I went for this kind of hybrid combination of all suggestions, it does the job nicely...

function Ash_CheckOrUncheckCheckboxes(TheFormID, CheckboxState){

var f = document.getElementById(TheFormID);
var inputs = f.getElementsByTagName("input");

	for(var t = 0;t < inputs.length;t++){

		if(inputs[t].type == "checkbox")
		inputs[t].checked = CheckboxState;
		}
	}

[mwaqas84]

@sh;10908176 wrote:

I've been using the following script to Check All/Uncheck All checkboxes...

	function Ash_CheckAllCheckboxes(field)
	{
	for (i = 0; i < field.length; i++)
		field[i].checked = true ;
	}

	function Ash_UnCheckAllCheckboxes(field)
	{
	for (i = 0; i < field.length; i++)
		field[i].checked = false ;
	}

...however I've just changed my PHP script so that it renders the checkboxes as an array for the processing script - the consequence of that being that the checkboxes now have a [] after the 'Name', like this

name="checkboxes[]"

...my Javascript no longer works, how can I change the Javascript to get this working?

I also need a javascript function that will check whether any of the checkboxes are checked, if none are checked on submit, I want to warn the user that they haven't made a selection and allow them to OK to continue to the Submit page, or Cancel to stop the post and allow them to check one?

Thanks in advance!

Hey bro.
Simple solution: 🙂

var checkboxesarr = document.getElementsByName('checkboxlanguage[]')
this is the way to access checkbox[] in js