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.
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;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
Im having trouble understanding how to solution the following code so that its using "Class Name" instead of "Name".
For example: I when you click 9am I would like only and all other 9AM elements disabled.
Thank you for any insight.
<script>
function ckChange(el) {
var ckName = document.getElementsByTagName('input');
for (var i = 0, c; c = ckName[i]; i++) {
if (ckName[i].type == "checkbox" && el.className === "9AM") {
c.disabled = !(!el.checked || c === el);
}
}
}
</script>
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="progress1" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="progress1" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="progress1" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="progress1" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="checkbox" name="progress1" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="text" name="progress1" id="progress4" tabIndex="1" onClick="ckChange(this)">Input</td>
</tr>
If what you're looking to do is disable any other elements that have the same className than you need to update your if statement a bit. You're checking only the element that was passed into the function when I think you mean to do a comparisson of the element that was checked with all other elements className.
function ckChange(el) {
var ckName = document.getElementsByTagName("input");
for (var i = 0, c; (c = ckName[i]); i++) {
console.log(el.className)
if (ckName[i].type == "checkbox" && ckName[i].className === el.className) {
c.disabled = !(!el.checked || c === el);
}
}
}
Here's a functioning codepen: https://codepen.io/orunnals/pen/qBEabgq
You can group elements with the same class name and then, when a checkbox is checked, disable all the elements in its group.
Here is an example:
const groupClasses = ['9AM', '10AM', '11AM'];
const groups = groupClasses.map((cls) => {
const elms = document.getElementsByClassName(cls);
return Array.from(elms);
});
groups.forEach((group) => {
group.forEach((elm) => {
elm.addEventListener('change', () => {
group.filter(e => e !== elm).forEach((e) => {
e.disabled = elm.checked;
});
});
});
});
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="" id="progress1" value="1" tabIndex="1">9AM</td>
</tr>
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="" id="progress2" value="1" tabIndex="1">9AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1">10AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1">10AM</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="checkbox" name="" id="progress4" value="1" tabIndex="1">Test 4</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="text" name="" id="progress4" tabIndex="1">Input</td>
</tr>
check current element class with all other class
ckName[i].className === el.className
<script>
function ckChange(el) {
var ckName = document.getElementsByTagName('input');
for (var i = 0, c; c = ckName[i]; i++) {
// console.log(ckName[i]);
if (ckName[i].type == "checkbox" && ckName[i].className === el.className) {
ckName[i].disabled = true;
//c.disabled = !(!el.checked || c === el);
}
}
}
</script>
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
<td><input class="9AM" data="9AM" type="checkbox" name="" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">9AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
<td><input class="10AM" data="10AM" type="checkbox" name="" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">10AM</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="checkbox" name="" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>
<tr>
<td><input class="11AM" data="11AM" type="text" name="" id="progress4" tabIndex="1" onClick="ckChange(this)">Input</td>
</tr>
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) {
// ...
}
});
I need to show an error if none of the below checkboxes are checked using using JavaScript.
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
You can implement it using selecting all elements with some given name using document.querySelectorAll and an attribute selector using the pseudoclass :checked:
var checkedCheckboxes = document.querySelectorAll("[name='chk_stat[]']:checked");
if (checkedCheckboxes.length == 0) {
console.log("No checkbox is checked...");
}
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
i have designed page
that contains 60 questions and each question have 5 radio button.
i want to validate all of question; in other mean all of them had to answer.
and if one of them is not answered tell the number of it yo the user.
how i can validate it with javascript
here is some example of code
<div >
<tr id="trr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')" >
<td colspan="5">1. question 1</td>
</tr>
<tr id="tr1" onmouseover="changecolor('tr1','trr1')" onmouseout="backcolor('tr1','trr1')">
<td>totaly agree <input id="s1" name="s1" type="radio" value="2" /></td>
<td>agree <input id="s1" name="s1" type="radio" value="1" /></td>
<td>none <input id="s1" name="s1" type="radio" value="0" /></td>
<td>dis-agree <input id="s1" name="s1" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s1" name="s1" type="radio" value="-2" /></td>
</tr>
<tr id="trr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')" >
<td colspan="5">2. question 2</td>
</tr>
<tr id="tr2" onmouseover="changecolor('tr2','trr2')" onmouseout="backcolor('tr2','trr2')">
<td>totaly agree <input id="s2" name="s2" type="radio" value="2" /></td>
<td>agree <input id="s2" name="s2" type="radio" value="1" /></td>
<td>none <input id="s2" name="s2" type="radio" value="0" /></td>
<td>dis-agree<input id="s2" name="s2" type="radio" value="-1" /></td>
<td>totaly dis-agree <input id="s2" name="s2" type="radio" value="-2" /></td>
</tr>
</div>
Consider adding jQuery and using the jQuery validation plugin. It's a much more convenient way to deal with this type of tasks. Forcing to choose one option will be as simple as:
radioGroup: {required :true}
Overriding message with error to inform user about not picking anything:
jQuery.extend(jQuery.validator.messages, {
required: "This field is required."
});