I have searched the forums but I can't seem to find the solution for this mini-issue that I have.
So I have this form on which I have like 10 Groups of Radio buttons each group having the same name of course. What I need to do is loop through each of the ten groups and perform a function if all of them are unchecked but I can't seem to find a solution for this. With what I have accomplished so far I am repeating code 10 times which I know is not a good idea. I'm sure there is a better way to do that too.
What I have so far is:
var drivingCheck = document.getElementById('index-form').Driving;
for (var i = 0; i < drivingCheck.length; i++) {
if (drivingCheck[i].checked == true) {
break;
} else {
totalCount -= 5;
console.log(totalCount);
break;
}
}
var sleepCheck = document.getElementById('index-form').Sleep;
for (var i = 0; i < sleepCheck.length; i++) {
if (sleepCheck[i].checked == true) {
break;
} else {
totalCount -= 5;
console.log(totalCount);
break;
}
}
This is for two of the radio button groups, I have ten of these. How can I do this without repeating myself so many times? & the issue with the current code is, if any radio button except the first element is checked the code performs the " false " operation which should only be performed if the " .checked " is false on all elements of the group.
EDIT
This update now makes the code perform the operation only when all fields are not checked but still I am repeating the code too many times:
var recreationCheck = document.getElementById('index-form').Recreation;
for (var i = 0; i < recreationCheck.length; i++) {
if (recreationCheck[i].checked == true) {
break;
} else if (recreationCheck[0].checked && recreationCheck[2].checked && recreationCheck[3].checked && recreationCheck[4].checked && recreationCheck[5].checked == false) {
totalCount -= 5;
console.log(totalCount);
break;
}
}
Here is the HTML for the two groups:
<h3>9: Sleep Per Night</h3>
<div class="options">
<input name="Sleep" type="radio" value="0" class="radioCheckBtn">I can sleep with no problem
<input name="Sleep" type="radio" value="1" class="radioCheckBtn">My sleeping is a slight problem (only 1 hour lost sleep)
<input name="Sleep" type="radio" value="2" class="radioCheckBtn">My sleeping is a mildly problem (1 to 2 hours lost sleep
<input name="Sleep" type="radio" value="3" class="radioCheckBtn">My sleeping is a moderate problem (2 to 3 hours lost sleep)
<input name="Sleep" type="radio" value="4" class="radioCheckBtn">My sleeping is a great problem (3 to 5 hours lost sleep)
<input name="Sleep" type="radio" value="5" class="radioCheckBtn">My sleeping is a severe problem (5 to 7 hours lost sleep)
</div>
<h3>10: Recreational Activities</h3>
<div class="options">
<input name="Recreation" type="radio" value="0" class="radioCheckBtn">I can perform all recreation activity without neck pain
<input name="Recreation" type="radio" value="1" class="radioCheckBtn">I can perform recreation activity with only some neck pain
<input name="Recreation" type="radio" value="2" class="radioCheckBtn">I can perform most, not all recreation activity due to neck pain
<input name="Recreation" type="radio" value="3" class="radioCheckBtn">I can only perform some recreation activity due to neck pain
<input name="Recreation" type="radio" value="4" class="radioCheckBtn">I can hardly perform recreational activity due to pain in my neck
<input name="Recreation" type="radio" value="5" class="radioCheckBtn">I cannot perform any recreation activity
</div>
I hope I'm making sense.
Thank you
Aucun commentaire:
Enregistrer un commentaire