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>

change all checkboxes in one table-row

I want to uncheck all checkboxes that are in one table row.
I have this HTML code :
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" checked="checked" type="checkbox">
Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox">
Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox">
Feld 3
</td>
<td>...and so on
<td>
</tr>
What I have tried at now is this jquery code:
$("tr#unlosta_line_1").children("td").each(function(i) { $(i).prop("checked", false) } )

Problem with you implementation is that, You are setting checked property of TD element not checkbox.
You can directly use :checkbox selector, then set its checked property
$("#unlosta_line_1 :checkbox").prop("checked", false);

input is the children of the td
(function (){
$("#unlosta_line_1").children("td").each(function(i) {
$(this).children('input').attr("checked", false)
})
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" type="checkbox"> Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox"> Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox"> Feld 3
</td>
<td>...and so on
<td>
</tr>
</table>

I have multiple <td> with the checkbox and its values.I want to change colour of <td>

Below is my HTML code which contains multiple checkboxes with the respective values in <td>. I got the values of clicked checkboxes through php which is an array format $res[]. I want to make the checkbox disappear of which i got values and make the <td> background color to red with the value of checkbox visible. I got the values of checkboxes in php as $res[0][seat]=>4; and $res[1][seat]=>1 where 4 and 1 are values. How to do this using jQuery?
<table>
<tr>
<td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td>
</tr>
</table>

Try this:
$('.chk').on('click', function(e){
e.preventDefault();
if($(this).is(':checked')) {
$(this).hide();
$(this).closest('td').css('background-color','red');
}
});
Fiddle here

UPDATED try this:
var arr=[4,1];// array list received from php
for(i=0;i< arr.length;i++){
$('table tbody tr td input[type=checkbox]').each(function(){
if($(this).val()==arr[i]){
$(this).hide();
$(this).closest('td').css('background-color','red');
}else if($(this).is(':visible')){
$(this).closest('td').css('background-color','pink');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td></tr></table>

use filter() in jquery
var arrayValue = [4, 1];
$(".chk").filter(function () {
return arrayValue.indexOf(+this.value) != -1 // check arrayvalue is present in check box or not using indexOf
}).closest("td").css('background-color', 'red').find(".chk").hide(); // set background for closest td and hide chk
DEMO

validating multiple textboxes in javascript

<form name="quest" onsubmit="return validate();">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="R1" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="R1" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="1" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="2" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="3" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="4" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="5" name="R3">
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance

You can try this solution below.
Note that a full working example can be found at the end of this post.
Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)
Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.
Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.
Eg:
<input type="radio" value="1" name="R1" id="R1" disabled>
Add an the following events to each of your "Answer" text inputs:
onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:
if the content of the texbox is empty, the function unchecks the checkbox,
else, it checks it.
ondragstart="return false" which prevents to copy the content from a given textbox to another.
Eg:
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer
</td>
In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.
In your <head>, add the following JS functions:
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="") {
document.getElementById("R"+index).checked = "checked";
}
else {
document.getElementById("R"+index).checked = "";
}
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked) {
nb_checked++;
}
}
if(nb_checked < 3) {
alert("Enter at least 3 responses!");
}
else {
isok = true;
}
return isok;
}
As you can see, there are two functions: one is toggle_checkbox and the other is validate.
As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.
The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>
Full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="")
document.getElementById("R"+index).checked = "checked";
else document.getElementById("R"+index).checked = "";
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked)
nb_checked++;
}
if(nb_checked < 3) alert("Enter at least 3 responses!");
else
isok = true;
return isok;
}
</script>
<head>
<body>
<form onsubmit="return validate();" method="post" action="http://www.google.com">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="Ra" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
<td>
<input type="radio" value="2" name="R2" id="R2" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
<td>
<input type="radio" value="3" name="R3" id="R3" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
<td>
<input type="radio" value="4" name="R4" id="R4" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
<td>
<input type="radio" value="5" name="R5" id="R5" disabled>
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.
Hope this helps. Let me know if you have any questions.

How to check a set of radio buttons that all are selected?

I've a list of radio buttons that are generated dynamically. The names of radio buttons are also generated dynamically. The first row of radio buttons has name 1, the second row radio buttons have name 2. Each row has three radio buttons with same name but different values.
How can I check using jquery that one radio button is selected in each row when submitting the form?
<tr>
<th>1</th>
<td> Please select one option </td>
<td class='selectable_cell'>
<input type="radio" name="2" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="2" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="2" value="3" />
</td>
</tr>
<tr>
<th>2</th>
<td> Please select another option </td>
<td class='selectable_cell'>
<input type="radio" name="3" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="3" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="3" value="3" />
</td>
</tr>

Assuming that each row of radio buttons is wrapped into a specific element (e.g. a <fieldset> or a <tr>) you could easily check (at submit event) if the amount of wrapper elements is equal to the number of selected radio, with
var group = $('#yourform tr');
if (group.length === group.find('input[type="radio"]:checked').length) {
/* you choose one radio for each group */
}

I think you can add classes or ids to the rows something like #row1, #row2. After that its fairly easy
// gives you the no of radio buttons checked in first row
// $('input[type=radio]:checked', '#row1')
// gives you the no of radio buttons checked in second row
// $('input[type=radio]:checked', '#row2')
if($('input[type=radio]:checked', '#row1').length > 0 and $('input[type=radio]:checked', '#row2') > 0 ) {
// your code goes here
}

Try this
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
//All Checked
}

like this:
Demo: http://jsfiddle.net/K2WsA/ and from your updated code and minor change: http://jsfiddle.net/K2WsA/1/
behaviour: in demo select at least one in both the group and you will get an alert.
hope it helps!
group them according to names:
if($("input[type=radio][name=foo]:checked").length > 0 &&
$("input[type=radio][name=bar]:checked").length > 0)
{
/* do something */
}

Here on below demo link, i have done complete bins for above issue. so please check once it may help you.
Demo: http://codebins.com/bin/4ldqp9l
HTML:
<table id="table1" cellpadding="0" cellspacing="0" width="70%">
<tr>
<th>
1
</th>
<td>
Please select one option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="3" />
</td>
</tr>
<tr>
<th>
2
</th>
<td>
Please select another option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="3" />
</td>
</tr>
<tr>
<th>
3
</th>
<td>
Please select another option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="3" />
</td>
</tr>
</table>
<br/>
<input type="button" id="btncheck" name="btncheck" value="Check Radio Selection" />
<div id="result">
</div>
CSS:
table#table1{
border:1px solid #225599;
}
table#table1 th{
border:1px solid #225599;
padding:2px;
background:#a48866;
}
table#table1 td{
border:1px solid #225599;
padding:2px;
background:#94dbfd;
}
.error{
color:#ca1619;
}
.success{
color:#006633;
}
JQuery:
$(function() {
$("#btncheck").click(function() {
var result = "";
$("table#table1").find("tr").each(function() {
var row = $.trim($(this).find("th").text());
if ($(this).find("input[type=radio]:checked").length > 0) {
var opValue = $(this).find("input[type=radio]:checked").val();
result += "<p class='success'>Row " + row + ": The option with value \"" + opValue + "\" has been selected... :)</p>";
} else {
result += "<p class='error'>Row " + row + ": No option has been selected..!</p>";
}
if (result != "") {
$("div#result").html(result);
}
});
});
});
Demo: http://codebins.com/bin/4ldqp9l