How do i Dynamically change a rad button name - javascript

I am trying to make a little form in which the users select their gender. I have a script that creates a new line for additional users but the problem is that as this code clones the previous element and the radio button name attribute is the same as before making the gender selection name unusable, is there a way to change the radio buttons name when adding a new row so the group will be different to the previous groups name.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
table.appendChild(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>


Assign name property for child elements of cloned node.
Use querySelector to select element.
Use querySelectorAll('#myTable tr') selector to get the length of the tr elements.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
var index = --document.querySelectorAll('#myTable tr').length;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
table.appendChild(newRow);
}
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />


You should not try to clone the line and make changes to names.
You should generate the HTML code for the row and hanlding the correct name directly.
Here is an example snippet:
var idx = 0;
window.onload = addRow;
function addRow() {
var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>';
var row = document.createElement("tr");
row.innerHTML = rowHTML;
var table = document.getElementById('myTable');
table.appendChild(row);
idx++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
</table>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>


Done this with JQuery, Try this:
function addRow() {
var table = $('#myTable');
var newRow = $("#myTable tr:last").clone()
var name = $(newRow).find("input[type='radio']").attr("name");
var newVal = parseInt(name.match(/\d+/)) + 1;
$(newRow).find("input[type='radio']").attr("name", 'gender' + newVal);
table.append(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>

Related

how to select an entire column

I made a data sheet similar to excel with columns and rows and a buttons to add rows and column if needed I want to make a cell or div disabled (for read-only) that display the summation of numbers inside cells in a specific column, the problem is how I select that column and every newly added cell to that column
here is the code of the datasheet
<div class="content-container">
<div class="search">
<button class="table_btn" id="addrow">
Add Row
</button>
<button class="table_btn" id="addcol">
Add Column
</button>
<button class="table_btn" id="sav">
Save
</button>
<button class="table_btn" id="edi">
Edit
</button>
<input type="text" class="form-control" id="search-box" />
</div>
<table
class="table table-striped table-dark table-hover table-bordered"
id="mtable"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/georgesteven1/5dsn7ouc/22/

If I get it right, you are looking for a selector for all elements in a certain column. If so you can use the ":nth-child(n)" CSS selector.
Let's say you need to select the second column:
$("tr td:nth-child(2)").addClass("selected");
Hope it helps.

How to make a multiplication table in jquery

Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>

How to sum values from form text field array using jquery onlick function

I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;
<head lang="en">
<meta chartaxt="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>Sample salary computation</title>
</head>
<body>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
</form>
</body>
I want a jquery script that can sum total = (salary + tax) for each staff using onclick button

$("#submit").click(function() {
$("tr").each(function() {
if ($(this).find(".salary")) {
var salary = parseInt($(this).find(".salary").val(), 10)
var tax = parseInt($(this).find(".tax").val(), 10)
$(this).find(".total").val(salary + tax)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
<button id="submit" type="button">Submit</button>

You can use selector to get or set the val with iQuery. Something like this
$("button").click(function(){
var total = $("input[name=salary]").val()+$("input[name=tax]").val();
$("input[name=total]").val(tatal);
});

Here is one solution:
http://codepen.io/tryggvigy/pen/BzAqGR
var sums = []
$('input[type=button]').click(function() {
var salaries = $('.salary')
.toArray()
.map(function(salary) { return salary.value })
var taxes = $('.tax')
.toArray()
.map(function(tax) { return tax.value})
sums = salaries.map(function(salary, i) {
return parseInt(salary) + parseInt(taxes[i])
})
alert(document.sums)
})

How to get the column sum total values of last 2 column's in this dynamic table

The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.

Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE

Select only one checkbox/radiobutton in the same row and column

I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>

It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes

I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>

I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>

Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}

Categories

Resources