Develop Reference

JavaScript CheckBox Change Color Not Working

Hi I am trying to use this checkAll function.
If I click on the checkAll checkbox, then all of the row will be selected and the background color will change accordingly.
Here is my javascript:
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
row.style.backgroundColor = "aqua";
inputList[i].checked = true;
}
else {
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "#e4edfb";
} else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
This is my code:
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("Id") %>' />
<asp:CheckBox runat="server" ID="chkBoxMultipleSelect" CssClass="chkBoxMultipleSelect" OnClick="checkIfUnselected(this);" />
</ItemTemplate>
</asp:TemplateField>
After click on the checkAll checkBox, I am only able to change the color of that checkbox column only, but not my other column.
Any help is apparated. Thanks.

function checkAll(spanChk) {
var IsChecked = spanChk.checked;
var Chk = spanChk;
Parent = document.getElementById('gvMessageReportShow');
var items = Parent.getElementsByTagName('input');
for (i = 0; i < items.length; i++) {
if (items[i].id != Chk && items[i].type == "checkbox") {
if (items[i].checked != IsChecked) {
spanChk.parentElement.parentElement.style.backgroundColor = 'aqua';
items[i].click();
}
}
}
}
I ended up finding my answer here
http://www.codedigest.com/Articles/ASPNET/132_GridView_with_CheckBox_%E2%80%93_Select_All_and_Highlight_Selected_Row.aspx

using javascript to loop through asp.net radio button list to get selected value and text

I am creating a questions and answers page and the answers are a collection of asp.net radiobuttonlist as per the following: `
<div class="col-md-4">
<asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow">
<asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
</asp:RadioButtonList>
<br />
<textarea class="text-danger" id="Q1CorrectAnswerText" name="Q1CorrectAnswerText" readonly="readonly" wrap="soft"></textarea>
</div>
Now, I am using the following JavaScript function to loop through to find out which one the user selected. The following is the JavaScript code.
function GetUserAnswerOneSelection()
{
var elementRef = document.getElementById('Q1AnswersRadioButtonList');
var radioButtonListArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (radioButtonRef.checked == true) {
// To get the Text property, use this code:
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[i].innerHTML;
}
}
}
userAnswer1 = checkedValues;
return userAnswer1;
}
The problem now is, it always breaks on this line var radioButtonListArray = elementRef.getElementsByTagName('input');
and reports that is undefined.
I need help please.

Try to put ClientIDMode="Static" in asp:RadioButtonList so you are able to get it in Javascript.
or do:
var elementRef = document.getElementById('<%= Q1AnswersRadioButtonList.ClientID %>');**

This works for me
function GetUserAnswerOneSelection() {
var elementRef = document.getElementById("Q1AnswersRadioButtonList");
var radioButtonListArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (radioButtonRef.checked == true) {
// To get the Text property, use this code:
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[i].innerHTML;
}
}
}
userAnswer1 = checkedValues;
}
<asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow" ClientIDMode="Static">
<asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
</asp:RadioButtonList>
Or You can get it in one line using JQuery like
$(document).ready(function () {
$("#Q1AnswersRadioButtonList input").click(function () {
GetUserAnswerOneSelection();
alert( $("#Q1AnswersRadioButtonList input:checked").next("label").html());
});
});

Accessing different check boxes in grid

I have a grid with two checkbox columns.
I want to have separate count for each column. I am unable to access them separately.
here is what I have tried:
function CountChkBxCancel() {
function CountChkBx() {
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
document.getElementById('<%=lblConfirmationCount.ClientID %>').value = numChecked;
CountChkBxCancel();
if (numChecked > 0) {
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = numChecked;
}else {
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = '0';
}
}
This id for two checkbox column in grid
<ItemTemplate>
<%-- <asp:Label ID="Label6" runat="server"> <%# Container.DataItemIndex + 1 %></asp:Label> --%>
<asp:CheckBox ID="chkNominee" runat="server" onclick="CountChkBx()" />
</ItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkCancel" runat="server" onclick="CountChkBxCancel()" />
</ItemTemplate>
How to access the checkbox count for these different IDs?

<script type="text/javascript">
function CountChkBx(checkBox) {
var checked = 0;
var checkBoxes = document.getElementsByClassName(checkBox.parentNode.className);
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].getElementsByTagName("INPUT")[0].checked) {
checked++;
}
}
var label = null;
switch (checkBox.parentNode.className) {
case "cbNominee":
label = document.getElementById("<%= lblConfirmationCount.ClientID %>");
break;
case "cbCancel":
label = document.getElementById("<%= lblCancelCount.ClientID %>");
break;
}
if (label) {
label.innerHTML = checked.toString();
}
}
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkNominee" runat="server" CssClass="cbNominee" onclick="CountChkBx(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkCancel" runat="server" CssClass="cbCancel" onclick="CountChkBx(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
Confirmed: <asp:Label runat="server" ID="lblConfirmationCount" />
<br />
Canceled: <asp:Label runat="server" ID="lblCancelCount" />

function CountChkBx() {
var confirmCount = 0;
var cancelCount = 0;
Parent = document.getElementById('<%= this.gvNominationList.ClientID %>');
for (i = 1; i < Parent.rows.length; i++) {
var tr = Parent.rows[i];
// var td = tr.firstChild;
// var item = td.firstChild;
var td1 = tr.childNodes[0];
var td2 = tr.childNodes[1];
var item1 = td1.childNodes[0].firstChild;
var item2 = td2.childNodes[0].firstChild;
if (item1.type == "checkbox") {
if (item1.checked)
confirmCount = confirmCount + 1;
}
if (item2.type == "checkbox") {
if (item2.checked)
cancelCount = cancelCount + 1;
}
}
document.getElementById('<%=lblConfirmationCount.ClientID %>').innerHTML = confirmCount;
document.getElementById('<%=lblCancelCount.ClientID %>').innerHTML = cancelCount;
}

Setting value of text box in javascript function

I have a text box whose value I need to set in javascript function.
I calculate no of checkboxes checked in a grid and then assign the value to a hidden field whose value in turn is assigned to a text box.
Following is JS function.
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = '0';
}
It is being called at OnClick of checkboxes within grid:
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsTPMSelected" onclick="CountChkBx_tpm()" />
</ItemTemplate>
The same functionality is used for another checkbox with another JS function to set value for another textbox..and that is working absolutely fine!!
What could be the trouble!!
function CountChkBx() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsPocSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0) {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').value = numChecked;
}
else {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').Value = '0';
}
}
this is for following check box
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsPocSelected" onclick="CountChkBx()" />
</ItemTemplate>
</asp:TemplateField>
The text boxes are:
<td style="width: 100px">
<asp:TextBox ID="txtCounterConfirmation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
</td>
<td style="width: 100px">
<asp:TextBox ID="txtTPMRecom" runat="server"></asp:TextBox>
</td>

As far as I think you need to use
document.getElementById('<%=txtTPMRecom.ClientID %>').value
Instead of
document.getElementById('<%=txtTPMRecom.ClientID %>').Value
Concluding javscript code
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').value = '0';
}

Getting .ascx RadioButtonLists Selected Item Via JS

I'm trying to get the currently selected item within an asp:RadioButtonList through the java script on the page. I've looked up how to do this, but none of the ways suggested has worked. I'm coding for a dnn module. Here's what I have:
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsByName('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}
<asp:Label runat="server" Text="Slider Style" Font-Bold="True" />
<asp:RadioButtonList ID="SliderStyles" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="SliderStyle_OnSelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Text="Default" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="Slide Show" Value="1"></asp:ListItem>
</asp:RadioButtonList>
So far the value I get in my Javascript returns null each time.

Your for loop is incorrect change the "++i" to "i++" like this
for (var i = 0; i < radioObj.length; i++ )

Hello try with getElementsById
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsById('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}