Develop Reference

How to fetch the value of checkbox of the triggered button only in jquery?

<tr>
<td>Category 1</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
<tr>
<td>Category 2</td>
<td class="data">
<ul>
<li>
<input name="items[]" type="checkbox" value="1"> Item 1
<input name="items[]" type="checkbox" value="2"> Item 2
</li>
</ul>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
The table is dynamically created with jquery. So, what I want is when I click one of the save button, I want to fetch the checked data from the checkbox of that only consisting that clicked button, not from the other checkboxes.

use each function of Jquery to get all the checked boxes corresponding to the save button like below
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked").each(function(){
alert($(this).val());
});
})

Try this, i am using this code to display values but you can use it in for save....
$(document).ready(function() {
$("button").click(function(){
var chkvalue = [];
$.each($("input[name='items']:checked"), function(){
chkvalue.push($(this).val());
});
alert("My chkvalues are: " + chkvalue.join(", "));
});
});

Use closest()
$(document).on("click", ".save", function () {
$(this).closest("tr").find(".data [type=checkbox]:checked");
})
DEMO

Try,
$(document).on("click",".save",function(){
var checkedValues = $(this).closest("tr").find(".data :checked").map(function(){
return this.value;
}).get(); //["1","2"] depends on user selection
});
In the place of document use the closest static parent of .save button.
DEMO

you have to set checkid or checkclass for Check box :
$('#checkid').val();
$('.checkclass').val();
or
$("input[type='checkbox']").val();
or
$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

i think using this you can find the value of your check boxes
$('.save').on('click',function(){
$(this).prev().find("input[type='checkbox']").prop('checked');
})

jQuery remove row with matching file name as hidden

I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks

There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>

Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');

You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle

how to do select all when selected a checkbox

i have a table where i am filling some data and have checkboxes besides each and the last check box is "ALL".
When i check this "ALL" checkbox remaining check boxes should be checked and vice versa.
code for filling data.
<div class="tablecontatiner">
<table>
<tr>
<th>Function</th>
<th>Add</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
<th>All</th>
</tr>
#foreach (var item in Model)
{
<tr class="grouprow">
<td><input type="hidden"/><input id="#(item.Func_Code)" type="checkbox" style="visibility:hidden" />#item.FunctionName</td>
<td><input id="#(item.Func_Code + "A")" type="checkbox" value="Add" #(item.Add==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "E")" type="checkbox" value="Edit" #(item.Edit==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "V")" type="checkbox" value="View" #(item.View==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "D")" type="checkbox" value="Delete" #(item.Delete==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
</tr>
}
</table>
</div>
and my UI looks like :

Try this
$('#checkboxAll').on('change', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
if (!this.checked) {
$('#checkboxAll').prop('checked', false);
}
});
DEMO

Try
jQuery(function ($) {
//listen to the change of checkbox in the last td
$('.tablecontatiner td:last-child input').on('change', function () {
//update the checked property of all checkboxes in the same row as the changed checkbox
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
})
})

Try,
$('#chkAll').on('click', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});

Anton's solution is very elegant.
If you load (or reload) the table and don't want to set the event handlers each time it is reloaded, then I would change a bit the solution:
$('.tablecontatiner').on('change', '[id$=All]', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
Remark: Also I would give "checkboxAll" class to each "ALL" checkbox, so it will look like:
<input id="#(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>
and then the code above will be:
$('.tablecontatiner').on('change', '.checkboxAll', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
http://jsbin.com/jetewayi/1/edit

Select all checkbox not working

I have been using bootstrap tables to fetch data from database using kendo datasource. So in order to make it more interactive i have used a checkbox for simultaneous actions.
I want to delete all the entries with one checkbox. I have read about deleting entries with single checkbox using jQuery. But problem is that I have only one checkbox in table and all the entries are being fetched using kendo data source.
If i am creating confusion then see here-
<script id="template" type="text/x-kendo-template">
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" ></input>
</td></tr>
</script>
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" />
</th>
</tr>
</table>
Now with using kendo datasource i have one column of checkboxes only.
So i am doing this-
<script type="text/javascript">
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
</script>
And still no result. Help!

Try to wrap your jQuery code inside $(document).ready(function(){}); or $(function(){}); to let it see the whole DOM:
$(document).ready(function() {
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
});
Also, your HTML are wrapped inside the script tag, move it outside and remove redundant ' as well as the input tag doesn't need a closing </input> tag:
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" />
</td>
</tr>

<script type="text/javascript">
$(document).ready(function(){
$('.done').click(function (event) {
if ($(this).attr('checked')) {
$('input:checkbox:not(".done")').each(function () {
$(this).attr('checked', 'checked');
});
}
});
});
</script>
Try this. it may works

Try this:
$(function () {
$('.done').on('click', function(){
// i comment this condition if you want selectall for checked or unchecked
//if ($(this).is(':checked')){
$(':checkbox').prop('checked', this.checked);
//}
});
});

Just try this:
Script
$(document).ready(function(){
$('.done').click(function (event) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
});
});
HTML:
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" class="chkbxq" />
</th>
</tr>
</table>

Trying to get value from textbox in column in table

I dynamically created a table with three columns.
<tr>
<td>1</td>
<td>SegName</td>
<td><input type='text' /></td>
</tr>
I'm trying to write a function that goes through each row and grabs the value in that will be in the textbox.
Javascript:
$("#codeSegmentBody").children().eq(x).children().eq(2).val();
The code brings brings up undefined when I do val(), but if I do html it'll grab the html of the textbox.
How can I get this to bring me the value?

<table id="test">
<tr>
<td>
<input type="text" value="123">
</td>
</tr>
<tr>
<td>
<input type="text" value="abc">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#test").find(":input[type=text]").each(function(){
alert( $(this).val() );
});
});
</script>
Here is a fiddle that will get you there:
http://jsfiddle.net/uS8AK/

Assuming #codeSegmentBody is the name of your table, try this:
$("#codeSegmentBody td input").each(function() {
var inputValue = $(this).val();
alert(inputValue);
});
Example fiddle

$("#codeSegmentBody tr input[type='text']").each(function(){
alert($(this).val());
})

Try this
$("#codeSegmentBody tr").each(function() {
alert($(this).find("input").val());
});

You are referencing the containing <td> not the input. Try:
$("#codeSegmentBody").children().eq(x).find(":text").val();

var str = "";
$("#codeSegmentBody .third-column input").each(function()
{
str += this.value;
});
alert(str);

Not easier
$("table tr td input").val();
?
BTW. You don't have any value in this input anyway.