I am totally new to Knockout JS.I am having a table in which one column is input type checkbox.
at the end of html table I have one button as "Add".
Now what I want to do is on click of "Add" button I should be able to get all the rows in which checkboxes are checked.
HTML
<table>
<thead>
<tr>
<th>Add Data</th>
</tr>
</thead>
<tbody data-bind="foreach: SearchResult">
<tr>
<td data-bind="text: Name"></td>
<td><input type="checkbox" class="" data-bind="checked: selectedArray"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button type="button" id="addButton" data-bind="click: AddSelection">Add</button></td>
</tr>
</tfoot>
</table>
Now can anybody tell me how can I get all the rows in which checkbox column is checked.
I have gone through this but this didn't work for me.
send information from multiple checkbox to array Knockout js
fiddle for reference
http://jsfiddle.net/smsharma/u9ts4uvf/
Here's the updated fiddle: http://jsfiddle.net/u9ts4uvf/1/
You can create an addItem function, that creates a new item, and adds it to the array availableItems:
self.addItem = function() {
var item = new BookItem(1, 'Lorem Ipsum', '$0.99');
item.Selected(true);
self.availableItems.push(item);
};
But you also need to add a checked binding to the checkboxes to ensure that they are checked when Selected is set to true for BookItem:
<input type="checkbox" data-bind="value: id(), click: $root.toggleAssociation, checked: Selected" />
Related
I have an HTML table with checkboxes, the table is generated on the basis of filter values selected in dropdowns
I am trying to fetch the values of checked checkboxes as ids of students then put them in an array "selected" then the elements in this array are added to the hidden input tag one by one. For e.g If I selected a filter called 5th class, the students of 5th class are listed in the table with the checkbox. Now if I checked some students their ids are stored hidden input tag successfully.
var selected = [];
//On click check all records
$(document).on("click", "#completebatch,.commoncheckbox", function() {
selected = $('.commoncheckbox:checked').map((i, el) => {
return $(el).attr('value')
}).get();
$("#allStudentIds").val(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th>
</thead>
<tbody>
<tr>
<td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td>
<td>abc</td>
</tr>
<tr>
<td><input class="commoncheckbox" value="357" type="checkbox"></td>
<td>abc</td>
</tr>
<tr>
<td><input class="commoncheckbox" value="123" type="checkbox"></td>
<td>abc</td>
</tr>
</tbody>
</table>
<input type="hidden" value="" id="allStudentIds">
Now lets suppose I have select some students from 6th class. The list of 6th class students will be generated successfully in the table. Now When I wiil check any checkbox, all the previously selected items get vanished (i.e in the above example the ids of 5th class students in hidden input tag gets vanished).
I want that this should not happen. I want to maintain the previously selected ids in hidden input tag.
Try this :
...
var previousIds = $("#allStudentIds").val();
$("#allStudentIds").val(previousIds+selected);
...
If there is a possibility to duplicated id you can remove them before set value to #allStudentIds input
I have a table with some values, the last input is a checkbox.
I need to save the id of the input into an array only when is checked.
This is my partial table:
<table id="produtcTable" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Producto</th>
<th scope="col">Precio de lista</th>
<th scope="col">Agregar</th>
</tr>
</thead>
<tbody>
<tr th:each="stock : ${stockList}">
<td th:text="${stock.productName}"></td>
<td th:text="${stock.price}"></td>
<td class="text-center">
<input class="form-check-input" type="checkbox" th:attr="id=${stock.stockCode}" onclick="myFunction(this)" aria-label="...">
this is my javascript that does not work:
<script >
function myFunction(product) {
var arr= [];
$('input[id='+ product.id +']:checked').each(function () {
arr.push(product.id);
});
alert(arr.toString());
};
</script>
what am I doing wrong?
I can't see a id attribute on you checkbox in you snippets. But there is some code i can not identify (not mentioned in post) setting the id. Please make sure there is an id in your current DOM (Browser Development tools: inspector). According to your snippet you can try the follwing:
<input type="checkbox" id="cb1" onclick="myFunction(this)"/>
<input type="checkbox" id="cb2" onclick="myFunction(this)"/>
and the following JS code would update an global array the the clicked checkbox id:
var arr= [];
function myFunction(inputCB) {
arr.push(inputCB.id);
alert(arr);
}
I have a table that has 10 rows and 3 columns and each row has a checkbox associated with it. The user can select any number of rows and when he presses the Submit button an alert message needs to be displayed containing the values in all the selected rows preferably as a JSON string. How do I extract all the selected rows alone and convert it to a JSON string using either Javascript or Jquery?
I hope I've understood your requirements well. Please consider this solution.
$('#btn-table-rows').click(function (event) {
var values = [];
$('table #row-selector:checked').each(function () {
var rowValue = $(this).closest('tr').find('td.row-value').text();
values.push(rowValue)
});
var json = JSON.stringify(values);
alert(json);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #1: Hello</td>
</tr>
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #2: World</td>
</tr>
</table>
<button id="btn-table-rows">Process</button>
I have table which consists of multiple rows and each row consists of Radio button in the first column as follows:
<table class="table table-condensed span8" id="AllocationTable">
<thead>
<tr>
<th title="Entity to Allocate" style="width: 30%">Entity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.EntityAllocations)
{
<tr>
<td>
<input type="radio" name="radio" id="#item.ID" class="EntityRadioSelect" value="#item.ID" onclick="EntitySelect(this)" disabled="disabled" >
</td>
</tr>
}
</tbody>
</table>
Now I want to capture the Ids of the last clicked radio button
I have tried something like this
function EntitySelect(select) {
if ($(select).parent().data("lastClicked")){
alert($(select).parent().data("lastClicked"));
}
$(select).parent().data("lastClicked", select.id);
}
But I am getting the wrong value as it is giving me current value and sometime other values which is not accepted answer.
var clicked='';
var preClicked='';
$("#AllocationTable").on("click",".EntityRadioSelect",function(){
preClicked=clicked;
clicked=$(this).attr("id");
});
remove onclick="EntitySelect(this)"
try this:
function EntitySelect(select) {
var parent=$(select).parents('#AllocationTable');
if (parent.data("lastClicked")){
alert(parent.data("lastClicked"));
}
parent.data("lastClicked", select.id);
}
I am working on a html page. The page has a table with 3 columns and a button. One of the columns of the table is a check box (The number of rows are changed dynamically):
<table cellpadding="0" cellspacing="0" border="1" class="display" id="tag" width="100%">
<tbody>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="0"/>
<td>fruit</td>
<td>apple</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="1"/>
<td>fruit</td>
<td>pear</td>
</tr>
</tbody>
</table>
<p><input type="button" value="Generate" onclick="generate()"></p>
When user click the "Generate" button, the generate() function will generate a special string base on the column of each row.
My question is that how can I check if the "checkbox" row is checked or not? I would like to filter those non-checked rows when I generate the string.
Thanks.
Filter the rows based upon which have a checked checkbox:
var rows = $(".case:checked").closest("tr");
This returns a jQuery object that contains all of your table rows housing checked checkboxes.
Call getElementsByName will give you an array of references of your checkboxes.
Loop the array in order to get the values.
var arr = document.getElementsByName("case");
for(i = 0; i < arr.length; i++){
if(arr[i].checked){
doSomething;
}
}