Develop Reference

How can I make an alert with the number of the buttons that are not checked?

I have n radio buttons within an HTML form. A dialog box appears if not all of them are checked. How can I make an alert with the number of the buttons that are not checked?
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br"/></td>
<td><input type="radio" id="RadioButton"name="br"/></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
</tr>
I want to display the number of the radios that are not checked

Use .reduce to identify all radio names, then use .filter over each name and :checked selector to figure out the number of unchecked radio fields:
const allRadioNames = [...document.querySelectorAll('input[type="radio"]')]
.reduce((names, { name }) => {
if (!names.includes(name)) names.push(name);
return names;
}, []);
document.querySelector('button').addEventListener('click', () => {
const checkedCount = allRadioNames.filter(name => {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`);
}).length;
console.log('uncheckedCount: ' + (allRadioNames.length - checkedCount));
});
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
<br>
<button>submit</button>

Note: this solution will fetch the number of boxes checked but will not match by name. As long as you know how may boxes should be checked, it shouldn't be a problem. The browser allows only one of the boxes with matching names to be checked. Let me know if you need something more specific.
This is a single-line solution. Simply use a query selector all within the confines of the table. Fetch :checked boxes and then alert the length.
function init() {
var table = document.getElementById('table');
var radioBoxes = table.querySelectorAll('input[type="radio"]:checked')
alert(radioBoxes.length)
}
<table id="table">
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
</table>
<input type="button" onclick="init()" id="button" value="How many are checked?">

Cannot get Radio Button Value using Javascript

I am building a personality assessment page. However, I am seriously stuck and at this point, I cannot even understand where I went wrong. (Psychology student here, so this world is new to me.)
<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return validateForm()">
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="submit" onclick="get();">Get Results</button></th>
</tr>
</form>
Now I am adding here following script:
function get() {
var res1 = document.getElementsByName("st1").value;
var res2 = document.getElementsByName("st2").value;
var x = res1 + res2;
if (x < 0) {
document.getElementById('result').innerHTML = x;
}
}
And answer.html consists of
<div id="result"></div>
I cannot seem to get the value no matter how hard I try. I've tried doing id="st1_1" and getElementById, but it still won't do it.
Any suggestions or ideas what am I doing wrong?
Thank you

document.getElementsByName returns a NodeList, so there are multiple elements. As a result, it doesn't have a value property so res1 and res2 are undefined.
Try changing document.getElementsByName("st1").value to document.querySelector("[name=\"st1\"]:checked").value. If you get an error message like "TypeError: Cannot read property 'value' of null" then it means that none of the inputs with the name "st1" is checked.

Adding to James Long's answer,
Open the console on the webpage and type
document.getElementsByName("st1");
You will get
[<input type=​"radio" name=​"st1" class=​"dis" value=​"-1">​, <input type=​"radio" name=​"st1" class=​"na" value=​"0">​, <input type=​"radio" name=​"st1" class=​"agg" value=​"1">​]
This indicates that you the above code returns an array. Now to select either of the <input> tags, you can use document.getElementsByName("st1")[0] which will select the first <input>.
To find out which input/s have been selected, iterate over the inputs and find the total sum. If you changed your values to
<input type="radio" name="st#" class="dis" value="1">
<input type="radio" name="st#" class="na" value="2">
<input type="radio" name="st#" class="agg" value="4">
Then if the sum is 1, then first one is selected, if it is 2, then second is selected, if 3 then first two were selected, if 4 then third is selected, if 5 then first and third, 6 then second and third, 7 then all three.

function get() {
var res1 = document.querySelector('input[name="st1"]:checked').value;
var res2 = document.querySelector('input[name="st2"]:checked').value;
console.log("res1="+res1);
console.log("res2="+res2);
var x = parseInt(res1) + parseInt(res2);
// if (x < 0) {
document.getElementById('result').innerHTML = x;
// }
}
<form method="get" class="personality_form" id="personality_form">
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="button" onclick="get();">Get Results</button></th>
</tr>
</table>
</form>
<div id="result"></div>

Please review working code this may help to resolve an issue. You should not use both "onClick() on submit button" and "OnSubmit on form post" at a time.
click()
This method is a shortcut for in the first two variations and in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. click() event bind with a mouse. There are multiple events available for the mouse.
submit()
submit() This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third. This method belongs to form event. There are also more events which are specifically bound with HTML form only.
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.
$(document).ready(function() {
$(".personality_form").on("submit", function(e) {
e.preventDefault();
getData();
});
function getData() {
var res1 = $("input[name='st1']").val();
var res2 = $("input[name='st2']").val();
var x = parseInt(res1) + parseInt(res2);
if (x < 0) {
$('.result').html(x);
}
}
function validateForm() {
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" class="personality_form" id="personality_form">
<tr>
<td>Statement1</td>
<td>
<input type="radio" name="st1" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st1" class="na" value="0">
</td>
<td>
<input type="radio" name="st1" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement2</td>
<td>
<input type="radio" name="st2" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st2" class="na" value="0">
</td>
<td>
<input type="radio" name="st2" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement3</td>
<td>
<input type="radio" name="st3" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st3" class="na" value="0">
</td>
<td>
<input type="radio" name="st3" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement4</td>
<td>
<input type="radio" name="st4" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st4" class="na" value="0">
</td>
<td>
<input type="radio" name="st4" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement5</td>
<td>
<input type="radio" name="st5" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st5" class="na" value="0">
</td>
<td>
<input type="radio" name="st5" class="agg" value="1">
</td>
</tr>
<tr>
<th colspan="4">
<button type="submit" class="btnSubmit">Get Results</button>
</th>
</tr>
</form>
<div class="result">
</div>

getElementsByName returns a live nodelist so you can't immediately grab the value. You need to iterate over the nodelist (or get the node you want using array notation) and then add the values.
However, what you might find easier is to use querySelectorAll to pick up all the checked buttons (document.querySelectorAll(":checked")) and iterate over those instead, making sure that you convert the string value to a number on each iteration when you add the values together.
function get() {
var checked = document.querySelectorAll(":checked");
let total = 0;
for (let i = 0; i < checked.length; i++) {
total += Number(checked[i].value);
}
document.getElementById('result').textContent = total;
}
document.querySelector('button').addEventListener('click', get, false);
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
</table>
<button>Get!</button>
<div id="result"></div>

Show/hide rest of the rows when checkbox is checked

I have a table which has a checkbox in the first column (in a <td> element) of every row. When this is checked, the rest of the columns in that row will be displayed.
I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the <td> elements using css but not been able to make it visible.
I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

Using jQuery:
$(document).ready(function() {
$("tr td:first-child :checkbox").change(function() {
var checkboxes = $(this).parent().siblings("td").children(":checkbox");
var containers = $(this).parent().siblings("td:not(first-child)");
if (this.checked) {
containers.css('visibility', 'visible');
checkboxes.prop("checked", true);
} else {
containers.css('visibility', 'hidden');
checkboxes.prop("checked", false);
}
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using only JS:
var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");
Array.from(primaryCheckboxes).forEach(checkbox => {
checkbox.addEventListener("click", function(event) {
var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
var checkedSatus = false,
visibilityStatus = "hidden";
if (this.checked) {
checkedSatus = true;
visibilityStatus = "visible";
}
Array.from(secondaryCheckboxes).forEach(checkbox => {
if (checkbox !== this) {
checkbox.checked = checkedSatus;
checkbox.parentElement.style.visibility = visibilityStatus;
}
});
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable>
<input type="checkbox" name="level3" value="3" />
</td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable>
<input type="checkbox" name="level4" value="4" />
</td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

Disabling choices after a selection has been made with select tags?

I'm building a web form and I currently have five 'drop-down' menus (using the select tag) that allow users to choose a value from 0-5. It looks like this:
Choose one:
<select name="choose_one" required>
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Is there anything I can do to disable a certain number from being chosen again if it is chosen on a select menu in other menus? Meaning, if I select 1 on the first drop-down menu I come across, I wouldn't be able to select it again on the others.
A potential solution I was considering was making a table of radio buttons. When a user selects a number, it disables that whole row of numbers. However I'm not really sure if I could do this in HTML. I think I'd need to use JS/JQuery.
One of the issues here is that 0 should be able to be selected multiple times, but a column needs to be disabled after a value for that column has been selected. The 0 field could be checkboxes, but then the style wouldn't be the same as the radio buttons.

Use same name for radio buttons in one cloumn.
For example
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input type="radio" name="item1" value="0" /></td>
<td><input type="radio" name="item2" value="0" /></td>
<td><input type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input type="radio" name="item1" value="1" /></td>
<td><input type="radio" name="item2" value="1" /></td>
<td><input type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="radio" name="item1" value="2" /></td>
<td><input type="radio" name="item2" value="2" /></td>
<td><input type="radio" name="item3" value="2" /></td>
</tr>
</table>
Update
$("input[type=radio]").click(function() {
var selectedValue = $(this).val() ;
$("input[value="+selectedValue+"]").each(function(){
if(!$(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input type="radio" name="item1" value="0" /></td>
<td><input type="radio" name="item2" value="0" /></td>
<td><input type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input type="radio" name="item1" value="1" /></td>
<td><input type="radio" name="item2" value="1" /></td>
<td><input type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="radio" name="item1" value="2" /></td>
<td><input type="radio" name="item2" value="2" /></td>
<td><input type="radio" name="item3" value="2" /></td>
</tr>
</table>

Similar to what #Bilal proposed. I added a data-col attribute for each column as well and I use this to disable the other radio buttons in the same column. There is probably a better way to do this but this is off the top of my head.
HTML
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input data-col="1" type="radio" name="item1" value="0" /></td>
<td><input data-col="2" type="radio" name="item2" value="0" /></td>
<td><input data-col="3" type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input data-col="1" type="radio" name="item1" value="1" /></td>
<td><input data-col="2" type="radio" name="item2" value="1" /></td>
<td><input data-col="3" type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input data-col="1" type="radio" name="item1" value="2" /></td>
<td><input data-col="2" type="radio" name="item2" value="2" /></td>
<td><input data-col="3" type="radio" name="item3" value="2" /></td>
</tr>
</table>
JavaScript
var all = $('input[type="radio"]');
all.on('change' function(){
var col =$(this).attr('data-col');
$('[data-col="'+col+'"]').prop('disabled', true);
$(this).prop('disabled',false);
});

Sum TD in one TR

How can i sum values from td input in one TR?
<table>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="4" /></td>
<td><input type="text" class="three" value="5" /></td>
<td><input type="text" class="four" value="3" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="4" /></td>
<td><input type="text" class="three" value="5" /></td>
<td><input type="text" class="four" value="3" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="6" /></td>
<td><input type="text" class="three" value="4" /></td>
<td><input type="text" class="four" value="2" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="5" /></td>
<td><input type="text" class="two" value="2" /></td>
<td><input type="text" class="three" value="3" /></td>
<td><input type="text" class="four" value="8" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="4" /></td>
</tr>
</table>
LIVE DEMO
I can sum all values with function .each but how to make this for each tr, not td?
I would like sum values from input with class TWO and class THREE and class FOUR and add this to input with class SUM in same TR.
For my example should be:
2 4 5 3 **12** 2 // 4+5+3
2 4 5 3 **12** 2 // 4+5+3
2 6 4 2 **12** 2 // 6+4+2
5 2 3 8 **13** 4 // 2+3+8

Your code should look like this.
You need to iterate over the td with the particular class in question and sum up the values. Then assign that value to the input that you were referring to.
$('tr.here').each(function(){
var sum = 0;
$('.two, .three, .four', this).each(function() {
sum += parseFloat(this.value);
});
$('.sum', this).val(sum);
})
Check Fiddle

Try below code
$('tr.here').each(function () {
var sum = parseFloat($(this).find('.two').val()) + parseFloat($(this).find('.three').val()) + parseFloat($(this).find('.four').val());
$(this).find('.sum').val(sum);
})
Check this Fiddle