How to take values ​from several checkboxes if one checkbox is checked? - javascript

I have a checkbox, one in the table, and one outside the table (check all). The checkbox outside the table serves to check all the checkboxes on each row in the table and take the value checkbox and enter it in the textbox. I have created a function to check all checkboxes in the table if the checkbox outside the table has been checked. The problem is that I can't retrieve all the checkbox values ​​and enter it to the textbox. How to take all the value checkboxes if the checkbox outside the table has been checked?
below is my view
<div id="sectionTable">
<input type="checkbox" name="check_all" onclick="paymentCheckedAll(this);" /><span>Check All</span>
</div>
<table class="table">
<tr>
<th>selected</th>
<th>Name</th>
</tr>
#foreach (Learning.ViewModels.StudentViewModelitem in Model.StudentDetails)
{
<tr>
<td>
#Html.CheckBoxFor(modelitem => item.IsChecked, new {#class = "idRow", #id = "test", #value="123" })
<td>
<td>
#Html.DisplayFor(modelitem => item.Name)
</td>
</tr>
}
</table>
#Html.TextBoxFor(model => model.ListSelectedIdPayment)
<script>
$(document).ready(function () {
$(document).on(' change', 'input[name="check_all"]', function () {
$('.idRow').prop("checked", this.checked);
});
});
</script>

If you want values of all the checked checkboxes:
$('.idRow').each(function(){
if($(this).attr('checked')){
//set value here by $(this).attr('value')
}
});

Related

How to get radio button value and clear checked radio button in table

I'm creating multiple radio button in table, using Razor syntax (under ASP.NET Core MVC).
<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
<tr>
<th>Id</th>
<th>Document Name</th>
<th>Signed?</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>#item.DocumentName</td>
<td>
#foreach (var sign in item.Signs)
{
<div class="form-check form-check-inline">
<input type="radio" asp-for="#item.Sign" value="#sign" class="form-check-input" />
<label class="form-check-label">#sign</label>
</div>
}
<div class="text-center">
Update | Clear
</div>
</td>
</tr>
}
</tbody>
</table>
#section Scripts {
<script>
$(function () {
$('.update').click(function (e) {
e.preventDefault();
var signed = $('input[name="item.Signed"]:checked').val();
alert(signed);
});
$('.clear').click(function (e) {
e.preventDefault();
$('.clear input[type="radio"]').prop('checked', false);
});
});
</script>
}
Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.
The problem is, from razor syntax, it will generate html radio with the same id & name for each row. So I cannot check the radio per row and clear the checked radio button.
How to solve this?
I'm creating similar code in jsfiddle for this case.
<input type="radio" asp-for="#item.Sign" value="#sign" class="form-check-input" />
it will generate html radio with the same id & name for each row.
The asp-for attribute will generate and set value for id and name html attribute, which cause the issue.
Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.
To achieve your requirement, you can try:
remove asp-for attribute, and dynamically set default checked option
<input type="radio" name="Sign_for_#item.Id" #(item.Sign==sign? "checked" : "") value="#sign" class="form-check-input" />
modify js code to find parent td element, then find radio buttons
<script>
$(function () {
$('.update').click(function(e) {
e.preventDefault();
var signed = $(this).parent().parent().find('input[type="radio"]:checked').val();
alert(signed);
});
$('.clear').click(function(e) {
e.preventDefault();
$(this).parent().parent().find('input[type="radio"]').prop('checked', false);
});
})
</script>
Test Result
You could use for loop instead of foreach and take advantage of index number to create unique Ids per each row.
<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
<tr>
<th>Id</th>
<th>Document Name</th>
<th>Signed?</th>
</tr>
</thead>
<tbody>
#for(int i = 0; i < Model.Count; i++)
{
var item = Model[i];
<tr>
<td>#item.Id</td>
<td>#item.DocumentName</td>
<td>
#foreach (var sign in item.Signs)
{
<div class="form-check form-check-inline">
<input type="radio" name="item.Sign#i" id="#item.Sign#i" value="#sign" class="form-check-input" />
<label class="form-check-label">#sign</label>
</div>
}
<div class="text-center">
Update | Clear
</div>
</td>
</tr>
}
</tbody>
Instead of jquery event listeners you could use onclick attribute on Update and Clear buttons and pass row number as an argument. But I'm not sure if this is right solution.

How to select all boxes using input type checkbox

picture of my columns and checboxes
<table class="table table-striped grid-table">
<tr>
<th>Id</th>
<th>Code</th>
<th>
<input type="checkbox" id="box"/>
</th>
</tr>
#foreach (var item in (IEnumerable<cit.Models.getPersonPerName_Result>)Model)
{
<tr>
<td>#item.idper</td>
<td>#item.pername</td>
<td>
<div class="pure-checkbox">
<input type="checkbox" id="#item.idper" class="chk" checked="#(item.idperson == ViewBag.idperson ? true : false)" name="#item.id.ToString()" id="#item.id.ToString()" />
<label for="#item.id.ToString()"></label>
</div>
</td>
</tr>
}
I have defined class pure-checkbox, so item.idper is my column with values of my document, and item.pername is my column with codes of my document, and there is pure-checkbox column which I defined for checkboxes which i can check only one by one, but i want to check them all using input type on the code above.
The way to to this is to listen for changes in the state of the 'master' checkbox. You can do this by attaching an event handler. When this handler is triggered you have to set the checked state of all other checkboxes to the checked state of the 'master' checkbox:
var selectAllBox = document.getElementById('box');
selectAllBox.addEventListener('click', function() {
var pureCheckboxes = document.getElementsByClassName('chk');
for(var i = 0; i < pureCheckboxes.length; i++) {
pureCheckboxes[i].checked = this.checked;
}
});
A working JSFiddle: https://jsfiddle.net/TDucheyne/raxdzw1f/
You can do it with a single line as
$(document).ready(function(){
$("#box").change(function(){
$(".chk").prop('checked',$(this).prop('checked'));
});
});
JSFiddle

Get all selected table rows onclick of a submit button

I have one table populated from csv file. user will upload and can select a particular row. On click of submit button all the selected row data will be sent to a webservice.
I have done everything like populating the data and all using AngularJS(v1.6) and also i can get particular rowData onclick of a checkbox. But the problem is .checked is giving false if am not selecting all the rows. As a result if user checks and again uncheck a particular row then that value am not able to remove.
heres my code:
$scope.getRow = function(n,item){
var selectedRows = [];
console.log(item);
console.log(document.getElementById("checkboxValue").checked);
//will push all selected items to selectedRows
}
<table id="customers">
<tr>
<th></th>
<th ng-repeat="(key,data) in tableData[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in tableData">
<td><input type="checkbox" id="checkboxValue" ng- click="getRow(this,item)" /> </td>
<td ng-repeat="(key,data) in item"> {{data}}</td>
</tr>
</table>
<button ng-click="executeQuery()">Execute</button>
table will look like
you can add ng-model to your checkboxes
<input type="checkbox" ng-model="item.checked"/>
and instead of updating(adding/removing items from) selectedRows everytime user clicks a checkbox, you can add checked values to selectedRows when user clicks on submit function by iterating through tableData.
var selectedRows = [];
angular.forEach($scope.tableData, function(value, key) {
if(value.checked){
selectedRows.push(value);
}
});

jQuery Select Checkbox When Text Exists, Hide Unselected Rows from Print

I have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle

jQuery checkbox triggering the checking of other checkboxes

I have a table which has a header row containing a checkbox and also has checkboxes in each of the body rows.
When the user checks the header checkbox, each of the body checkboxes also gets checked, and if one of these body checkboxes is unchecked the header checkbox gets unchecked. This is working fine, but I now want to add more tables which are linked to each of the body rows on the first table.
Here's an example of the html:
<table class="parent-table">
<thead>
<tr>
<th>Title</th>
<th>
<input type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr data-user-id="ID1">
<td>ID1</td>
<td>
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
<br /><br />
<table class="child-table" id="ID1">
<thead>
<tr>
<th>ID1</th>
<th>
<input type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Two</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Three</td>
<td>
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
So now I have a child table which works the same way as the original table but I would also like the checkbox from the row in the parent table to work the same way as the header checkbox in the child table, so when all the checkboxes are checked in the child table, the header checkbox and the checkbox from the row in the parent table get checked.
To add a further level of complexity, I would ultimately like to use indeterminate states on the checkboxes if 'some' of the checkboxes are checked.
Here's the javascript/jQuery I have so far... I think the main thing that's not working is when the checkbox from the parent table gets automatically checked, the header checkbox from that parent table is not being checked if all rows are checked.
/* SEPARATE FROM THE OTHER 'ON CHANGE' CODE BECAUSE THIS IS USED ON ALL TABLES */
$(document).on('change', 'td input[type=checkbox]', function () {
var ind = $(this).closest("td").index();
check_checkbox($(this).closest('table'), ind);
});
$('table th input[type=checkbox]').click(function () {
var checked = $(this).prop('checked');
var ind = $(this).closest("th").index();
$(this).closest('table').find('tbody tr').each(function () {
$(this).find('td:eq(' + ind + ') input[type=checkbox]:not(:disabled)').prop('indeterminate',false).prop('checked', checked).trigger('change');
});
});
function check_checkbox(table, pos) {
if (!pos) pos = 0;
var count = 0;
var checked = 0;
table.find("tbody tr").each(function () {
count = count + $(this).find('td:eq(' + pos + ') input[type=checkbox]:not(:disabled)').length;
checked = checked + $(this).find('td:eq(' + pos + ') input[type=checkbox]:checked').length;
});
table.find('th:eq(' + pos + ') input[type=checkbox]').prop('checked', count == checked && count > 0).prop('indeterminate',false).trigger('change');
}
/* *********************** */
$(document).on('change', '.parent-table td input[type=checkbox]', function() {
var checkit = $(this).prop('checked');
var a = $(this).closest('tr').attr('data-user-id');
$("table#"+a).find("tr").each( function() {
$(this).find("input[type=checkbox]").prop("checked", checkit);
});
});
$(document).on('change', '.child-table td input[type=checkbox]', function() {
var a = $(this).closest('table').attr('id');
var b = $(this).closest("tbody").find("input[type=checkbox]").length;
var c = $(this).closest("tbody").find("input[type=checkbox]:checked").length;
if(b == c) {
$("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", true).prop('indeterminate',false);
} else if(c == 0) {
$("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", false).prop('indeterminate',false);
} else {
$("table tr[data-user-id="+a+"]").find("input[type=checkbox]").prop("checked", true).prop('indeterminate',true);
}
});
And here's a jsfiddle... http://jsfiddle.net/5cBTT/
The problem is that in your check_checkbox() function, you are only updating header chkbox of the targeted table. For example, if you check all the boxes from the child table, you are updating the header boxe of this table but not the main one. What you should do is, in your
$(document).on('change', '.child-table td input[type=checkbox]', function() {
Add
check_checkbox($(".parent-table"),$(this).closest("td").index());
behind each
...").prop("checked", ...
here's a working fiddle
http://jsfiddle.net/TCHdevlp/5cBTT/1/
Also, I recommend you to bind checkboxes with the onchange event instead of counting checked boxes against boxes count. If one day, you want to use pagination in your tables, the count will only count visible checkboxes. So, if you check the "check all" box, only boxes of the current page will be checked. Also, each time your are checking a box, your are re-counting all the boxes of your page, wich can be a big number.

Categories