We Keep Coding

How to sum ticked RadioButtons

i would like to sum the ticked "Yes/No" RadioButtons from my checklist. So, it depens wheter i click on "Yes" or "No" if it should be count to sum.
This is my code so far. Unfortunately, the sum doesn't display.
function checkTicked() {
var form = document.getElementById("selected");
let sum = 0;
for (j = 0; j < form.length; j++) {
if (form[j].checked == true) {
sum = sum + 1;
}
}
document.getElementById("summe").value = sum;
}
<form name="liste"></form>
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice0" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice0" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice1" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice1" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe</b></td>
<td><input type="text" size="3" name="summe1" id="summe" value="0"></td>
</tr>
</tbody>
</table>

You had some issues
closed the form too early
missed a <table>
not unique IDs
you had an int instead of let or var in the for loop
To fix YOUR code you can do
function checkTicked() {
var radios = document.querySelectorAll("input[type=radio]:checked");
let sum = 0;
for (let i = 0; i < radios.length; i++) {
if (radios[i].closest("label").innerText.trim() === "Ja") {
sum += 1;
}
}
document.getElementById("summe").value = sum;
}
But I suggest delegation and a simpler script with more information on the radio itself:
I delegate from the form instead of adding inline event handlers
You can remove the summeNEIN from the form and the second count if you only want the JA
document.getElementById("liste").addEventListener("input", function(e) {
document.getElementById("summeJA").value = this.querySelectorAll("input[value=ja]:checked").length
document.getElementById("summeNEIN").value = this.querySelectorAll("input[value=nein]:checked").length
})
<form id="liste">
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label> <input type="radio" name="choice0" value="ja">Ja</label>
<label><input type="radio" name="choice0" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label><input type="radio" name="choice1" value="ja">Ja</label>
<label><input type="radio" name="choice1" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe JA</b></td>
<td><input type="text" size="3" name="summeJA" id="summeJA" value="0"></td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe NEIN</b></td>
<td><input type="text" size="3" name="summeNEIN" id="summeNEIN" value="0"></td>
</tr>
</tbody>
</table>
</form>

Use Class “Name” Instead of “Name” [closed]

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>

Highlight a table row if radio button has not been checked

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.

I want to display a textbox when I click on a particular option of a radio button in jsp

I have a radio button with 2 options. It goes like
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td>textbox here</td>
I want to display a textbox when i click "Different".
Its a JSP page. Thanks.

It would be nice to know which javascript framework you use.
With vanilla javascript this is a simple way by adding and removing hidden class on click event simply because that's most likely the only way to guaranty browser compatibility.
https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview
// js
window.onload = () => {
var rad2 = document.getElementById('r2');
var rad1 = document.getElementById('r1');
var input = document.getElementById('myInput');
rad2.addEventListener("click", function(){
input.classList.remove('hidden');
});
rad1.addEventListener("click", function(){
input.classList.add('hidden');
});
}
// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>
// css
.hidden {
display: none;
}

Here you go, if you want to again hide it just use .hide() function
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
<td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
<td class="show-this" style="display:none">textbox here</td>
</tr>
</table>
<script>
$('#testChecked').click(function(){
if ($(this).is(':checked'))
{
$('.show-this').show();
}
});
</script>
Make sure to add jQuery***

Here is what you need to do. If you are using a common class for the textbox inside <td> then you can use the class selector instead of input[type="text"].
$(document).ready(function(){
$("input[type='radio']").click(function(){
var textBox = $(this).closest('tr').find('td input[type="text"]');
if($(this).val() === 'Different'){
$(textBox).show();
} else {
$(textBox).hide();
}
});
});
td input[type='text'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city1" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
</table>

Ajax updatet score from input value

I am trying to create a form with three "Likert Scale" input.
For all three input field there is totaly 10 points that can be devided on the three "Likert scale" inputs. When this score is equal to 0, the submit button should be enabled and the form can be submitted. The number of points left should be updated without having the page reloade using ajax, so the user will know how many points that are left.
I have not really figured out how to do this but I have added some pseudo code, to explain this.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
document.getElementById("score").innerHTML = score;
$('input:radio').click(function() {
e.preventDefault();
// update score, based on clicked alternative value
new_score = score - alternative_clicked;
if new_score < 0:
var error = "You do not have enoght points left, choose a smaler number";
document.getElementById("error").innerHTML = error;
else if new_score === 0:
// enable submit button
else :
// update score with new_score value
});
$('input:submit').click(function() {
e.preventDefault();
// send to google spreadsheet
});
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This should be updated -->
<p><b>TOTAL POINTS LEFT:</b> <span id="score"></span></p>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr>
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr>
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="Submit" />
</form>

Here is a one way to do that:
(sorry for bad indentation in the snippet. Seems it is a bit buggy feature in SO)
I use eval() so I wouldn't need to write many if/else statements.
However - eval() isn’t evil, just misunderstood.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
var a1 = 0, a2 = 0, a3 = 0;
var inputs = $('input');
inputs.each(function(i) {
$(this).on('click', function() {
var clicked = $(this).closest('tr').get(0).id;
score += eval(clicked)
score -= eval(clicked + " = " + $(this).val());
$("#score").html(score);
if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
})
})
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="a1">
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr id="a2">
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr id="a3">
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input id="submit" type="submit" value="Submit" disabled/>
<div id="score"> 10
</div>
</form>