Develop Reference

Get all the values of td columns from table where checkbox is checked

I have a table as below:
..
There have been multiple questions asked for getting the values but in this case I should always have a parent item name. Suppose If a user selected only one subitem in "Shirts", then I should be able to get all the values from the selected tr and with that I need parent item name also i.e "shirts" and if some one clicks on all the subitems of a parent item, then all the values of all tr are need to be in some sort of array object on click of a "Save" button. I am trying hard to do this. Any help would be really appreciated. Though I have attached the HTML but this HTML is being generated at run time.
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td>Name</td>
<td>Sub Item</td>
<td>User Input</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup1" class="cls1" onclick="checkUncheckAll(this);" />
</td>
<td>Shirts
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item1</td>
<td>SubItem1</td>
<td>
<input id="1datepicker" name="1datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item2</td>
<td>SubItem2</td>
<td>
<input id="2datepicker" name="2datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item3</td>
<td>SubItem3</td>
<td>
<input id="3datepicker" name="3datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup2" class="cls2" onclick="checkUncheckAll(this);" />
</td>
<td>Jeans
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item4</td>
<td>SubItem4</td>
<td>
<input id="4datepicker" name="4datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item5</td>
<td>SubItem5</td>
<td>
<input id="5datepicker" name="5datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item6</td>
<td>SubItem6</td>
<td>
<input id="6datepicker" name="6datepicker" type="text" /><script>
</script></td>
</tr>
</table>
Script code looks like below:
<script>
function checkUncheckAll(sender) {
var chkElements = document.getElementsByClassName(sender.className);
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
function CheckCorrespondingHeader(sender) {
ControlLength = $("[name='" + sender.name + "']").length;
var countchecks = 0;
$("[name='" + sender.name + "']").each(function () {
if ($(this).prop('checked') == true) {
countchecks = countchecks + 1;
}
});
if (ControlLength == countchecks) {
$("#chk" + sender.name).attr('checked', 'checked');
}
else {
$("#chk" + sender.name).prop('checked', false);
}
}
function PickAllCheckedRows() {
}
</script>

As far as I can tell your code should work if you fix one issue. You are determining the number of sub rows that need to be checked to make the header row be checked using $("[name='" + sender.name + "']").length;. But unless I'm mistaken sender.name is never set. Of course if you set it this still won't work because your each function will include the header row. There are several solutions to this but I would recommend using a data attribute instead of the name attribute like so:
Markup:
<table>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 1 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 2 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group2" ... /></td>
</tr>
<tr>
<!-- row 3 -->
<td><input type="checkbox" data-in-group="Group2" ... /></td>
</tr>
</table>
Script:
function CheckCorrespondingHeader(sender) {
var group = $("[data-in-group='" + sender.data('headForGroup') + "']");
var groupSize = group.length;
var countchecks = 0;
group.each(function () {
if ($(this).prop('checked') === true) {
countchecks = countchecks + 1;
}
});
if (groupSize === countchecks) {
$(sender).attr('checked', 'checked');
} else {
$(sender).prop('checked', false);
}
}

How to substract checkbox value when combobox change

I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.

Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here

Jquery isn't setting radio button

I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.

Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/

Get Array data into table - jquery

An asp:DataList has generated the below html. A Q&A form, where each set has the Qno, Question and options.
//Repeating Set
<table id="tblQuestions" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" value="1/><label>sometext</label</td>
<td><input type="radio" value="2/><label>sometext</label</td>
<td><input type="radio" value="3/><label>sometext</label</td>
</tr>
</table>
</td>
</tr>
</table>
On a button click, I would like to check that all questions are answered.
JS:
//Get the questionslist
//Loop thro' them, assigning each list to a table.
// and then get the Qno and optionslist in that table
var QuestionsList = document.getElementsByClassName("tblQuestions");
function AllQuestionsAnswered() {
for(var i = 0;i<QuestionsList.length;i++)
{
var tbl = QuestionsList[i];
var OptionsList = $('tbl.clOptions input:radio');
$('tbl tr').each(function () {
var QuestionNo = $(this).find('.lbQno').text();
if(QuestionId > 0){
//perform check on each radiobutton of question
}
});
}
}
I am failing here on how to get the controls. All the 3 definitions inside the for loop arent working. How should I proceed further.

Let us assume that you can correct all problems with HTML:
missing " in input's value.
missing name for inputs.
missing > for </label>.
Then you can use this code for check all necessary questions.
Filter all questions that should be checked (based on .lbQno text).
For each filtered questions:
Get length of selected radio buttons for current question.
If there is no selected radio buttons (length equals to 0), then show an error and stop checking.
JavaScript:
$(document).ready(function()
{
function filterElement()
{
return parseInt($(this).find(".lbQno").text()) > 0;
}
$('#check').click(function()
{
$(".tblQuestions").filter(filterElement).each(function()
{
var checkedCount = $(this).find('.clOptions input:radio:checked').length;
if (!checkedCount)
{
alert($(this).find(".lbQno").next().text() + " is not answered");
return false;
}
});
});
});
Fiddle.
Related HTML:
<table id="tblQuestions1" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q1" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions2" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>Second question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q2" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions3" class="tblQuestions">
<tr><td><span class="lbQno">0</span><span>Unnecessary question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q0" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<input id="check" type="button" value="check"/>

On Radio Select, show different checkbox selection

I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?

I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/

First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});

Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.

You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}