I have the following function which works great in chrome, but in IE 11 doesn't.
It is designed to:
Take a questionGroup value determining which group of questions we want an average score for
Get a collections of the inputs on the page
Loop through them
If they are 'checked' then get the class name which determines the group the question is in
Count the number of questions in the group we're looking for
Get the total score for all questions in the group
Divide the total score by the number of questions to get the average score for the group
function getGroupScore(questionGroup) {
var inputs = document.getElementsByTagName("input");
var countOfQs = 0;
var totalGroupScore = 0;
for (var element in inputs) {
if (inputs[element].checked) {
var theQuestionsGroup = inputs[element].className;
if (theQuestionsGroup == questionGroup) {
var answer = parseInt(inputs[element].value)
totalGroupScore += answer;
countOfQs++;
}
}
}
var groupScore = totalGroupScore / countOfQs;
return groupScore;
}
In debugging, the loop seems to never get passed the following stage:
if (inputs[element].checked)
Even though there are input fields that are checked
example of the form I'm looping through:
<form action="">
<table style="margin: 0 auto; border: none;" id="reschecklist">
<tbody>
<tr>
<td rowspan="3" valign="top" width="400"><h3>Questions</h3></td>
<td colspan="5" class="center"><h3>Score</h3></td>
</tr>
<tr>
<td colspan="2" class="left"><strong>(not at all)</strong></td>
<td colspan="3" align="right" class="right"><strong>(I am fully implementing this)</strong></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="heading" width="400"><strong>Minimise overhead costs</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you consider and identify ways to maintain machinery better and cheaper?</p></td>
<td><input type="radio" name="q1" value="1" class="grp1" /></td>
<td><input type="radio" name="q1" value="2" class="grp1" /></td>
<td><input type="radio" name="q1" value="3" class="grp1" /></td>
<td><input type="radio" name="q1" value="4" class="grp1" /></td>
<td><input type="radio" name="q1" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="question"><p>Do you regularly review your overhead costs i.e. can you identify how much they cost you on a monthly, 6 monthly, annual basis?</p></td>
<td><input type="radio" name="q2" value="1" class="grp1" /></td>
<td><input type="radio" name="q2" value="2" class="grp1" /></td>
<td><input type="radio" name="q2" value="3" class="grp1" /></td>
<td><input type="radio" name="q2" value="4" class="grp1" /></td>
<td><input type="radio" name="q2" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="heading" width="400"><strong>Set goals and budgets</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you have a clearly set out vision and objectives for the business?</p></td>
<td><input type="radio" name="q3" value="1" class="grp2" /></td>
<td><input type="radio" name="q3" value="2" class="grp2" /></td>
<td><input type="radio" name="q3" value="3" class="grp2" /></td>
<td><input type="radio" name="q3" value="4" class="grp2" /></td>
<td><input type="radio" name="q3" value="5" class="grp2" /></td>
</tr>
<tr>
<td class="question"><p>Do you routinely (every 3-6 months), with your partner/s or your team, take a hands off view of the business and discuss objectives, performance etc?</p></td>
<td><input type="radio" name="q4" value="1" class="grp2" /></td>
<td><input type="radio" name="q4" value="2" class="grp2" /></td>
<td><input type="radio" name="q4" value="3" class="grp2" /></td>
<td><input type="radio" name="q4" value="4" class="grp2" /></td>
<td><input type="radio" name="q4" value="5" class="grp2" /></td>
</tr>
for-in is not how you loop through an HTMLCollection. Use a simple for or one of the "array like" approaches in this answer (which also explains why for-in isn't the right choice here). I suspect the problem is that there are no enumerable properties in the HTMLCollection on the platform where you're seeing the problem.
So for instance:
for (var element = 0 ; element < inputs.length; ++elements) {
In modern environments, HTMLCollection (what you get back from getElementsByTagName) may have the non-standard extension making it iterable (ES2015+) and giving it a forEach. If not, you can easily add it:
if (typeof NodeList !== "undefined" &&
NodeList.prototype &&
!NodeList.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
NodeList.prototype.forEach = Array.prototype.forEach;
}
if (typeof HTMLCollection !== "undefined" &&
HTMLCollection.prototype &&
!HTMLCollection.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
HTMLCollection.prototype.forEach = Array.prototype.forEach;
}
That code does both HTMLCollection and NodeList (what you get from querySelectorAll). Then you can use:
inputs.forEach(function(input) {
if (input.checked) {
// ...
}
});
Related
I am working on a test and bumped into a problem.
How do I make a .js script that only enables button when all fields are checked.
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>
I have found this .js online, but I can't make it fit well as I have multiple pages of test questions with different input names.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.getElementById('world').addEventListener('change', onChange, false);
There were some issues with your codebase.
document.getElementById('world').addEventListener('change', onChange, false);
Issue There is no node with that specified id.
Submit button has more than one id. That is not possible.
document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')
Your input type is radio so the above one wont work. Also the name attribute is wrong.
I have added those fixes.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=radio]:checked').length;
}
function onChange() {
console.log(numberOfCheckboxesSelected());
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.querySelectorAll('input[type=radio]').forEach(node => {
node.addEventListener('change', onChange, false);
});
<table>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
</table>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" value="Következő" disabled
id="enable-on-two" />
</div>
The above solution needs a little correction as it enables the submit button on two inputs selection instead of all three.
Replace following:
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
By this:
let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < totalInputs;
I followed this tutorial https://yagisanatode.com/2018/06/10/google-apps-script-getting-input-data-from-a-dialog-box-in-google-sheets/ to create a dialog box in Google Sheets and print the values. However, I'd like to feed these values into a new function. If I try to access them in line 29, the code somewhat breaks. I say 'somewhat' because it still runs until line 28, but I think it doesn't execute line 28 as I can't see anything in the log.
I also noticed that it doesn't close the dialog box automatically once I add my two new lines. I assume it has something to do with the function closeIt in testUI.html, but I can't figure out what it is as I'm new to jQuery/Javascript.
code.gs
//--GLOBALS--
var ui = SpreadsheetApp.getUi();
function onOpen(e) {
// Create menu options
ui.createAddonMenu()
.addSubMenu(ui.createMenu("Admin")
.addItem("Test", "test"))
.addToUi();
};
function test() {
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutputFromFile("testUI")
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the relevant module and unit");
};
function runsies(values) {
//Display the values submitted from the dialog box in the Logger.
Logger.log(values);
//I added the two lines below because I'd like to access the values, not just print them.
var valuesAcc = values[0]["orange"]
Logger.log(valuesAcc);
};
//I'd like to run another function after runsies so I can work with the values which were inputted
//into the dialogue box.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
function form_data(){
var values = [{
"orange":$("input[name=orange]:checked").val(),
"blue":$("input[name=blue]:checked").val(),
"green":$("input[name=green]:checked").val(),
"purple":$("input[name=purple]:checked").val()
}];
google.script.run.withSuccessHandler(closeIt).runsies(values);
};
function closeIt(){
google.script.host.close()
};
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<col width="60">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<tr>
<th></th><th><strong>Unit:</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<th><strong>Module</strong></th>
<th><strong>n/a</strong></th>
<th><strong>1</strong></th>
<th><strong>2</strong></th>
<th><strong>3</strong></th>
<th><strong>4</strong></th>
<th><strong>5</strong></th>
<th><strong>6</strong></th>
<th><strong>7</strong></th>
<th><strong>8</strong></th>
</tr>
<tr>
<td>Orange </td>
<td><input type="radio" name="orange" value="na" checked></td>
<td><input type="radio" name="orange" value="1"></td>
<td><input type="radio" name="orange" value="2"></td>
<td><input type="radio" name="orange" value="3"></td>
<td><input type="radio" name="orange" value="4"></td>
<td><input type="radio" name="orange" value="5"></td>
<td><input type="radio" name="orange" value="6"></td>
<td><input type="radio" name="orange" value="7"></td>
<td><input type="radio" name="orange" value="8"></td>
</tr>
<tr>
<td>Blue </td>
<td><input type="radio" name="blue" value="na" checked></td>
<td><input type="radio" name="blue" value="1"></td>
<td><input type="radio" name="blue" value="2"></td>
<td><input type="radio" name="blue" value="3"></td>
<td><input type="radio" name="blue" value="4"></td>
<td><input type="radio" name="blue" value="5"></td>
<td><input type="radio" name="blue" value="6"></td>
<td><input type="radio" name="blue" value="7"></td>
<td><input type="radio" name="blue" value="8"></td>
</tr>
<tr>
<td>Green </td>
<td><input type="radio" name="green" value="na" checked></td>
<td><input type="radio" name="green" value="1"></td>
<td><input type="radio" name="green" value="2"></td>
<td><input type="radio" name="green" value="3"></td>
<td><input type="radio" name="green" value="4"></td>
<td><input type="radio" name="green" value="5"></td>
<td><input type="radio" name="green" value="6"></td>
<td><input type="radio" name="green" value="7"></td>
<td><input type="radio" name="green" value="8"></td>
</tr>
<tr>
<td>Purple </td>
<td><input type="radio" name="purple" value="na" checked></td>
<td><input type="radio" name="purple" value="1"></td>
<td><input type="radio" name="purple" value="2"></td>
<td><input type="radio" name="purple" value="3"></td>
<td><input type="radio" name="purple" value="4"></td>
<td><input type="radio" name="purple" value="5"></td>
<td><input type="radio" name="purple" value="6"></td>
<td><input type="radio" name="purple" value="7"></td>
<td><input type="radio" name="purple" value="8"></td>
</tr>
</table>
<input type="submit" value="Submit" class="action" onclick="form_data()" >
</div>
And I think I should use a later version of jQuery?
Accessing values from a Dialog is easily performed with google.script.run. Information can be found at Client To Server Communication.
Here's a couple of examples of dialog boxes that I've done:
Data Entry Dialog Created from Header Info on Spreadsheet
Simple Example
Problem:
I have one table per tab (5 tabs in total) where each consists of three rows (one table header and two table data).
I wish to execute a JS script that scans only table rows that has the attribute id and then checks the radio buttons inside this row. If none has been selected then the table row should change color by adding a class to it.
Minimal (Working) Example:
HTML
<table class="table table-striped table-borderless" id="survey">
<thead class="text-center">
<tr>
<th scope="col"></th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td scope="row">Question 1</td>
<td><input type="radio" name="1" id="1" value="1"></td>
<td><input type="radio" name="1" id="1" value="2"></td>
<td><input type="radio" name="1" id="1" value="3"></td>
<td><input type="radio" name="1" id="1" value="4"></td>
<td><input type="radio" name="1" id="1" value="5"></td>
</tr>
<tr id="2">
<td scope="row">Question 2</td>
<td><input type="radio" name="2" id="2" value="1"></td>
<td><input type="radio" name="2" id="2" value="2"></td>
<td><input type="radio" name="2" id="2" value="3"></td>
<td><input type="radio" name="2" id="2" value="4"></td>
<td><input type="radio" name="2" id="2" value="5"></td>
</tr>
</tbody>
</table>
JavaScript
The function is called upon by a button in HTML when a user attempts to switch a tab.
validateForm() {
var valid = true;
var rows = Nodes.tab[this.currentTab].querySelectorAll('tr[id]');
for (var i = 0; i < rows.length; i++) {
var inputs = rows[i].querySelectorAll("input");
for (var x = 0; x < inputs.length; x++) {
// Add class to table row?
}
}
// If valid then mark step with green color
if (valid) {
document.getElementsByClassName("step")[this.currentTab].classList.add("finish");
}
// Return the valid status
return valid;
}
Desired output:
If a user does not check at least one radio button of a button group then add the CSS class "error" to that table row.
Just elaborating on my comments about exploiting the browser's native form validation to write less code.
Pure CSS and HTML solution:
<style>
#form1:invalid ~ table #row1 {
background-color: red;
}
#form2:invalid ~ table #row2 {
background-color: red;
}
</style>
<form id="form1"></form>
<form id="form2"></form>
<table class="table table-striped table-borderless" id="survey">
<thead class="text-center">
<!--...-->
</thead>
<tbody>
<tr id="row1">
<td scope="row">Question 1</td>
<td><input type="radio" name="f1" value="1" required form="form1"></td>
<td><input type="radio" name="f1" value="2" form="form1"></td>
<td><input type="radio" name="f1" value="3" form="form1"></td>
<td><input type="radio" name="f1" value="4" form="form1"></td>
<td><input type="radio" name="f1" value="5" form="form1"></td>
</tr>
<tr id="row2">
<td scope="row">Question 2</td>
<td><input type="radio" name="f2" value="1" required form="form2"></td>
<td><input type="radio" name="f2" value="2" form="form2"></td>
<td><input type="radio" name="f2" value="3" form="form2"></td>
<td><input type="radio" name="f2" value="4" form="form2"></td>
<td><input type="radio" name="f2" value="5" form="form2"></td>
</tr>
</tbody>
</table>
And if you really need JavaScript to know what's going on, you can call this to determine if a radio group has a value:
document.getElementById('form1').checkValidity()
It will return false if no radio in the group is selected.
See JsBin
I have a dynamic list of checkpoints which is generated from ng-repeat, each item has six radio buttons. I need to bind each of these sets to a $scope object.
Below, you can see I've set the name to things like selectedOption1, selectedOption2, etc... This allows each ng-repeated list to be independent of the next. Now, I need to bind the selected option of those selectedOptionX groups to a $scope object, while still maintaining the checkpoint.Name in the object.
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" name="selectedOption{{$index}}" value="pass" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="fail" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="remediated" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="nc" ng-checked="true" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="na" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
The output object might be something like:
[
{
Name: "the first checkpoint",
Value: "remediated"
},
{
Name: "the second checkpoint",
Value: "fail"
},
{
Name: "the third checkpoint",
Value: "pass"
},
];
What I've tried...
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption{{$index}}"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption[$index]"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption.$index"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="checkpoint.Name"/></td>
I've tried some other things, too, but nothing has come close.
http://jsbin.com/haxor/1/edit
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="pass" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="fail" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="remediated" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" name="selectedOption{{$index}}" ng-checked="true"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" ng-checked="true" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="x" name="selectedOption{{$index}}"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Try this, it will setup selected value inside checkpoints object
http://jsbin.com/barufuhi/3/edit
<div ng-controller="CheckpointsController">
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.value" value="one"></td>
<td><input type="radio" ng-model="checkpoint.value" value="two"></td>
<td><input type="radio" ng-model="checkpoint.value" value="three"></td>
<td><input type="radio" ng-model="checkpoint.value" value="four"></td>
<td><input type="radio" ng-model="checkpoint.value" value="five"></td>
<td><input type="radio" ng-model="checkpoint.value" value="six"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a bunch of checkboxes that are organized into categories. I have a checkbox for each category that toggles the corresponding group of checkboxes. For some reason, it isn't working in IE; however, I was able to get separate select all/clear all links to work fine.
See code here:
http://jsfiddle.net/mobilemelody/DyZF4/1/
For more context, these boxes are being used to turn on and off google fusion layers in the maps API. thanks!
EDIT
Sorry, I originally put the code in JSfiddle because I thought that would be easier for people..
Javascript:
function toggleOn(source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = true;
}
function toggleOff(source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
}
function toggle(toggleBox, source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = toggleBox.checked;
}
HTML:
<div>
<table>
<tr><td colspan="5"><label><strong>Routes:</strong></label></td></tr>
<tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-local" onClick="toggle(this, document.getElementsByClassName('local'))">local</td>
<td><input type="checkbox" checked="checked" name="route" id="17" value="17" class="local"/><label>17</label></td>
<td><input type="checkbox" checked="checked" name="route" id="19" value="19" class="local"/><label>19</label></td>
<td><input type="checkbox" checked="checked" name="route" id="22" value="22" class="local"/><label>22</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="23" value="23" class="local"/><label>23</label></td>
<td><input type="checkbox" checked="checked" name="route" id="29" value="29" class="local"/><label>29</label></td>
<td><input type="checkbox" checked="checked" name="route" id="35" value="35" class="local"/><label>35</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="36" value="36" class="local"/><label>36</label></td>
<td><input type="checkbox" checked="checked" name="route" id="45" value="45" class="local"/><label>45</label></td>
<td><input type="checkbox" checked="checked" name="route" id="49" value="49" class="local"/><label>49</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="51" value="51" class="local"/><label>51</label></td>
<td><input type="checkbox" checked="checked" name="route" id="71" value="71" class="local"/><label>71</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-stage" onClick="toggle(this, document.getElementsByClassName('stage'))">stage</td>
<td><input type="checkbox" checked="checked" name="route" id="61" value="61" class="stage"/><label>61</label></td>
<td><input type="checkbox" checked="checked" name="route" id="68" value="68" class="stage"/><label>68</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-shuttle" onClick="toggle(this, document.getElementsByClassName('shuttle'))">shuttle</td>
<td><input type="checkbox" checked="checked" name="route" id="222" value="222" class="shuttle"/><label>222</label></td>
<td><input type="checkbox" checked="checked" name="route" id="233" value="233" class="shuttle"/><label>233</label></td>
<td><input type="checkbox" checked="checked" name="route" id="257" value="257" class="shuttle"/><label>257</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="259" value="259" class="shuttle"/><label>259</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-school" onClick="toggle(this, document.getElementsByClassName('school'))">school</td>
<td><input type="checkbox" checked="checked" name="route" id="113" value="113" class="school"/><label>113</label></td>
<td><input type="checkbox" checked="checked" name="route" id="117" value="117" class="school"/><label>117</label></td>
<td><input type="checkbox" checked="checked" name="route" id="125" value="125" class="school"/><label>125</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="126" value="126" class="school"/><label>126</label></td>
<td><input type="checkbox" checked="checked" name="route" id="127" value="127" class="school"/><label>127</label></td>
<td><input type="checkbox" checked="checked" name="route" id="139" value="139" class="school"/><label>139</label></td>
</tr></table>
</div>
<a id="select-all" onClick="toggleOn(document.getElementsByName('route'))" style="cursor: pointer;">select all</a> |
<a id="clear-all" onClick="toggleOff(document.getElementsByName('route'))" style="cursor: pointer;">clear all</a>
document.getElementsByClassName() is not supported by IE < 9. However, you can use this pollyfill, which will define it for legacy browsers that don't:
(function () {
document.getElementsByClassName = function(classes) {
return this.querySelectorAll('.' + classes.replace(' ', ' .'));
}
}());
Another alternative is to use jQuery's class selectors instead.