Member Avatar for simplypixie

I have js on a form page for users to be able to select all check boxes for classes to enter in a dogs show but I want to be able to offer the facility to select just classes on specific days as well and I don't know how to do it.

The form source code for each class to select looks like this:

<input type="hidden" name="day_id_normal[12]" value="5" />

							<input type="hidden" name="day_id[12]" value="5" />
							<input type="checkbox" name="class_number[]" id="gradeclass" value="12"  />

The link to select all:

<a href="#" onclick="SetAllCheckBoxes('add-classes', 'gradeclass', true);return false;">Select All</a>

The JS Script:

function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
	if(!document.forms[FormName])
		return;
	var objCheckBoxes = document.forms[FormName].elements[FieldName];
	if(!objCheckBoxes)
		return;
	var countCheckBoxes = objCheckBoxes.length;
	if(!countCheckBoxes)
		objCheckBoxes.checked = CheckValue;
	else
		// set the check value for all check boxes
		for(var i = 0; i < countCheckBoxes; i++)
			objCheckBoxes[i].checked = CheckValue;
}

Not sure if I have included everything required to give information for anyone to help (please let me know if not) but the classes are split out by day so I am hoping I can use the reference to the day_id but not sure (am not sure if what I want to do is possible either).

Can anyone help please?

  • 2 Contributors
  • 3 Replies
  • 143 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 3 Replies

Member Avatar for Taywin

You should be able to. What you need to do is to add 'if-else' statement inside the 'for' loop statement. If you want to check for the 'name' attribute for a HTML element, you cannot access it directly, but you can access it by using "element.getAttribute('name')". For example, in your case, it should be "objCheckBoxes.getAttribute('name')" in order to get the checkbox's name attribute.

Member Avatar for simplypixie

Well I have looked at the help and as I am not too good with JS I can't get my head around it, can anyone expand more on how I can get this to work?

Member Avatar for Taywin

Below is a modified code from yours. What you need is to define how you want to group your checkbox. You could use 'name' to group it as below where your checkbox name may or may not contain '_normal'. Then you would only change value of those checkboxes.

function SetAllCheckBoxes(FormName, FieldName, CheckValue) {
  if(!document.forms[FormName])
    return;
  var objCheckBoxes = document.forms[FormName].elements[FieldName];
  if(!objCheckBoxes)
    return;

  var countCheckBoxes = objCheckBoxes.length;
  if(!countCheckBoxes)
    objCheckBoxes.checked = CheckValue;
  else {
    // set the check value for all check boxes
    // here, assume that only checkbox with name containing '_normal' will be changed
    for(var i = 0; i < countCheckBoxes; i++) {
      if (objCheckBoxes[i].getAttribute("name").match(/_normal/)) {
        objCheckBoxes[i].checked = CheckValue;
      }
    }
  }
}

// in your HTML, you may have
// only Box2 & Box3 should be affected because both have '_normal' in their name
<input type="checkbox" name="id_1" value=1>Box1
<input type="checkbox" name="id_1_normal" value=1>Box2 normal
<input type="checkbox" name="id_2_normal" value=1>Box3 normal
<input type="checkbox" name="id_2" value=1>Box4
Edited by Taywin because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.