Display selected checkbox values in div with jQuery - asp.net

I have a series of checkboxes and I would like to append the text value to a div every time and item gets selected, but I'd also like to remove the item from the div's text when an item is deselected.
I'm guessing the best way would be with some sort of an array? Can I get some guidance on this one?
edit: I should have mentioned this is for an ASP.NET checkboxlist (my bad), so my output looks something like this:
<div id="ctl00_ContentPlaceHolder1_divServices" style="width:450px; height:250px; overflow-y:scroll;">
<table id="ctl00_ContentPlaceHolder1_chklstServices" border="0">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$0" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_0">Adhesives & Sealants</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$1" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_1">Air Ambulance</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$2" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_2">Air Charter</label></td>
</tr>
</table>
</div>
<div id="selectedServices"></div>
I am actually trying to accomplish two things:
1) colorize (or remove color) of the cell background color when the checkbox is toggled (done this bit)
2) Append or remove the text of selected items when the checkboxes are checked/unchecked
My javascript/jquery code:
function ToggleBGColour(item) {
var td = $(item).parent();
if (td.is('.rowSelected'))
td.removeClass("rowSelected");
else
td.addClass("rowSelected");
}

You can use .map() and Array.join(), like this:
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().text(); //get the <label>'s text
}).get();
$("#myDiv").text(arr.join(','));
});
Whenever a checkbox changes, it'll loop through all checked checkboxes, create an array of their values, then put that as a comma delimited string into the <div>.
This is an example of course, just change the selectors to narrow down to the checkboxes you care about. You can give it a try here.

Related

select <label> in <td> come immediately after <input> thas this in <td> too in CSS

i Write this code
<table>
<tr>
<td><input type="checkbox" id="id" name="name" value="value"></td>
<td><label for="id">LABLE</label></td> /*SELECT THIS LABEL*/
</tr>
</table>
I need to select td[1] to work on it in the DOM and CSS.
how can i do it?
If you want to be able to target the label item in your HTML, the easiest way is to apply a class or id to it, like <label class="myLabel" for="id">LABLE</label>. Then you can target .myLabel in your CSS to be able to manipulate it.
You can do this using the selector
`:nth-child()`
In your particular example, you to select the checkbox, you can use:
table tr td:nth-child(1) {
// put your styling here
}
You could always add classes or ids to anything you want to select. You can then target elements in CSS or JS.
In CSS you can do it as such
.className {
// styling here
}
In Javascript you can do the follow:
document.querySelector('.className');
If you are using an id, you use #idName instead.

Issues with changing RadioButtonList to individual RadioButtons

I inherited a form that includes a RadioButtonList structure that's similar to this (names changed to protect the innocent):
<asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
<asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
<asp:ListItem Value="Evers" Text="Evers (Second Base)" />
<asp:ListItem Value="Chance" Text="Chance (First Base)" />
</asp:RadioButtonList>
When it renders in a browser, of course, it looks something like this:
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
</table>
Here's my problem: I need it to look like this (note the difference in table cell rendering):
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
</table>
In other words, I need the name and (position) separated out into separate columns, but they still need to align by row. Is this possible in a RadioButtonList?
I've tried making them into individual RadioButton objects, but after doing so, I started getting the following:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
I tried messing around with validation (including setting the CausesValidation property to "False"), all to no avail.
Note: I am not as concerned about the validation error as much as I am about the table rendering; that is more important (unless, that is, fixing the validation error helps fix the rendering issue).
What would be the best way to tackle this?
Thanks in advance . . .
Edit: I was able to recreate what I wanted by using straight client-side <input> tags, but this is not ideal. I would much prefer using server-side <asp:RadioButton>.
I've been doing some digging, and it appears that the reason why my RadioButton tags are failing validation is because of the ct100 prefixes that are concatenated to the beginning of the ID/Name tags. When the page is working (with the RadioButtonList) the IDs for each ListItem seems to have a "ct100_Content_" prefix, but the name has a "ct100$Content$" prefix.
The error I'm getting (when trying to use individual RadioButtons) is:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
From what I'm seeing, I think the control is looking for "ctl00_Content_ChicagoCubsInfield_0" (note the "_" instead of the "$").
How do I force the ID to use the underscores instead of dollar signs? I need to keep it local to these tags, as I believe settings are used elsewhere (again, this is not my form), and I don't want to break anything else.
Edit: So much for that theory. I came across the "ClientIDMode" attribute, set it to "Static", and explicitly set my IDs. No dice. The digging continues . . .
This may be answer what you are looking for:
$( document ).ready(function() {
$('label[for^="ChicagoCubsInfield"]' ).each(function() {
var data = $(this).text();
var arr = data.split('(');
$(this).text(data.substring(0, data.indexOf("(")));
$(this).parent().parent().append("<td>(" + arr[1] + "</td>");
// alert(arr[0] + " : " + arr[1]);
});
//alert( $('#ctl00_Content_ChicagoCubsInfield').html());
});
See Demo:
Demo Here
When all was said and done, here's what I ended up doing . . .
I added this to my <script>:
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);
This did exactly what I wanted. Now I can format the table at my leisure.

HTML radiobuttons in the form of matrix and it has to check only one radio button at a time in row and coloumn

In HTML, radio buttons are placed like a 3*3 matrix as mentioned below. The radio buttons group give a choice that in one row and column I have to select only one radio button and if I select another then first selected button should be disable. For example in the second Row(4,5,6) And Second column(2,5,8) if I select 5th radio button then (4,6) and (2,8) should be unchecked.If I Select 1 then (2,3) and (4,7) should be unchecked. It Means that in ONE ROW and ONE COLUMN there should be only one selection.....
1,2,3
4,5,6
7,8,9
Please give me your valuable answers,thanks in advance.
Radio Buttons with 2-Way Exclusivity
this snippet is from css-tricks.com by Chris Coyier
this is in HTML CSS and JS
convert it to asp controls
<table>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>Twix</td>
<td><input type="radio" name="row-1" data-col="1"></td>
<td><input type="radio" name="row-1" data-col="2"></td>
<td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
<td>Snickers</td>
<td><input type="radio" name="row-2" data-col="1"></td>
<td><input type="radio" name="row-2" data-col="2"></td>
<td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
<td>Butterfingers</td>
<td><input type="radio" name="row-3" data-col="1"></td>
<td><input type="radio" name="row-3" data-col="2"></td>
<td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
JS
var col, el;
$("input[type=radio]").click(function() {
el = $(this);
col = el.data("col");
$("input[data-col=" + col + "]").prop("checked", false);
el.prop("checked", true);
});
DEMO
Download
Thanks to Chris Coyier
This is not possible in HTML. Radio buttons act in a simple way: in any group of radio buttons, joined by the same name attribute value, only one can be checked at any moment, and checking an unchecked one unchecks the one that was checked. That’s it.
It’s not clear what the ultimate purpose is and what the best approach to it is. But if you have analyzed that you need a matrix like the one you describe, then you need to build the entire functionality yourself: using some elements that can be toggled, using CSS and JavaScript, behaving the way you describe.
It is best to avoid making the elements look like radio buttons, since that would be misleading: radio buttons as implemented in browsers work in a certain way, and making them behave in a different way would be at least confusing.

Adding an attribute to a ListItem, not rendering styles

I have a checkboxlist on a page as below.
<asp:CheckBoxList runat="server" ID="lstFeatures" RepeatDirection="Vertical"></asp:CheckBoxList>
The backend code looks like so.
private void MakeRegionCheckboxes(ReportRegion region, int margin)
{
foreach (ReportRegion subregion in region.childRegions)
{
ListItem item = new ListItem();
item.Text = subregion.Name;
item.Value = subregion.Name;
item.Selected = subregion.DefaultSelection;
item.Attributes.Add("style", "margin-left:" + margin.ToString() + "px");
lstFeatures.Items.Add(item);
MakeRegionCheckboxes(subregion, margin + 30);
}
}
When this runs on a blank project, it indents the "subregions" nicely as the style:margin-left:30px gets rendered in a span as you can see.
<td>
<span style="margin-left:30px">
<input id="lstFeatures_1" type="checkbox" checked="checked" name="lstFeatures$1">
<label for="lstFeatures_1">Member Information</label>
</span>
</td>
However, when I run the same code in my main project it doesn't render the spans and therefore the margin isn't getting set. All I get is this.
<td>
<input id="ctl00_pg_BuildReport_lstFeatures_1" type="checkbox" checked="checked" name="ctl00$pg$BuildReport$lstFeatures$1">
<label for="ctl00_pg_BuildReport_lstFeatures_1">Member Information</label>
</td>
It's the same framework on both projects (3.5) the only difference is the main project has a masterpage, and maybe some extra panels, but I just wondered what would stop the span on getting rendered? Any help would be useful. Thanks!
Try this and see if it has any effect:
item.Attributes.CssStyle.Add("margin-left", String.Format("{0}px", margin));

How to use the same name in input checkbox when we use asp:CheckBoxList

I usually avoid asp: controls and always use pure html controls with runat="server" due to their inflexibility. However, we have a system where it was built using those asp:controls. I have no choice but to follow the way it was built.
Here is the problem, when I data bind asp:CheckBoxList control DataTextField="Name" and DataValueField="ID", each input checkbox are using different names and when I need selected checkbox IDs, I have to loop through the whole checkboxlist to read the selected values.
If we use all those input name="Types" and read Request.Form["Types"] we can get all the selected ID values separated by commas, ",". In this way, I can avoid looping through all items in that checkboxlist. Is there any way we can do so that those input checkbox to use the same name?
Thanks.
EDIT:
I tried this and it is not working
ChkPropertyFeatures.Attributes.Add("name", "Types")
The reason I want to use the same name is not just to avoid loop at backend. I need to use jquery to select all those checkboxes by their name attribute. Yes, I know I can select by class name but I was wondering if I could change the name attribute of those checkboxes generated by Checkboxlist control.
You can not set the name of a web control from server side. If you need you can change the name attribute with javascript.
$("input[type='checkbox']").attr("name", "Types");
A CheckBoxList generates a span wrapping each checkbox of the list:
<table id="CheckBoxList1">
<tr>
<td><span name="chenchi"><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="Uno" /><label for="CheckBoxList1_0">Uno</label></span></td>
</tr><tr>
<td><span name="chenchi"><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" checked="checked" value="Dos" /><label for="CheckBoxList1_1">Dos</label></span></td>
</tr><tr>
<td><span name="chenchi"><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" checked="checked" value="Tres" /><label for="CheckBoxList1_2">Tres</label></span></td>
</tr>
</table>
You can change the name of each span dynamically this way:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
For Each c As ListItem In Me.CheckBoxList1.Items
c.Attributes("name") = "chenchi"
Next
End If
End Sub
Then you can use jquery to find out if each checkbox is checked:
var sps = $('#CheckBoxList1').find('[name="chenchi"]');
sps.each(function (i) {
alert( $(this).find('input:checkbox').attr('checked') );
});
Hope I understood your question well.

Resources