I have an html checkbox that controls a list of checkboxes. I want this checkbox to display in a sorta "null" state where it is neither true nor false. Is this possible?
<HeaderTemplate>
<div style="width:90px">
Toggle:
<input id="chkAll"
onclick="javascript:SelectAllCheckboxes(this);"
runat="server" type="checkbox" />
</div>
</HeaderTemplate>
No, a checkbox won't allow a custom third state. You need to find another way to handle it. A few come to my mind:
Use a dropdown list with three values, or three radio buttons
Use two checkboxes, one for assigned/null, second for checked/unchecked
Use an image and javascript to fill a hidden numeric field (it could be a fake checkbox, but it will not match each browser's look and feel and could look weird)
HTML doesn't natively support the notion of a three-state checkbox. You'd have to implement it with a custom control, using a combination of images and text.
no it isn't. but you can add additional property like you have 'runat'.
<input id="chkAll"
onclick="javascript:SelectAllCheckboxes(this);"
runat="server" type="checkbox" null="true" />
or you can add "disabled" instead of "checked"
here is js plugin that can help you:
http://www.blueshoes.org/en/javascript/checkbox/
Related
I have found numerous references to this but still cannot get it to work.
Several people have pointed to a previous post from 7 years ago that has a similar sounding problem but as detailed below the solution for that does not work at all.
I have the following asp code:
<asp:CheckBox id="checkbox1" runat="server" Style="display:inline;"
AutoPostBack="True" Text="Send Emails" TextAlign="Right"/>
It displays like this:
If I go into the elements explorer in Chrome I see the following:
If I manually add the style attribute to the input line like this (using the Chrome Elements right click menu), it works:
What am I doing wrong and how can I fix this?
Update: This is the "solution" I wound up doing:
<div >
<input id="checkbox1" type="checkbox" name="checkbox1" style="display: inline"/>
<label for="checkbox1">I would like to receive periodic email</label>
</div>
While this works it is obviously just avoiding the question entirely by switching to a HTML control vs ASP.
There could be a solution. As asp:CheckBox creating three controls and the ID is checkbox1 try the css for ID's
#checkbox1
{
display:inline !important;
}
This should work properly.
From a UI prospective, is it better to have a set of RadioButtons with the added functionality of being able to uncheck, or have a set of exclusive CheckBoxes, meaning only one can be checked at a time?
Update:
I did not expect such negative responses to this. Maybe it would help if I gave an example that is closer to how it's being used.
I have a GridView full of databound stuff. The user has the option of choosing one of the rows as "primary", but it's not required. new example:
$(":radio").click(function() {
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
$(":checkbox").click(function() {
$(":checkbox").not(this).prop("checked", false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a primary city and state (if applicable).<br />
<table><tr><td>
<table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="radio" name="radio" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr></table></td><td> </td><td><table border="1" >
<tr><td>Primary</td><td>City</td><td>State</td></tr>
<tr><td><input type="checkbox" /></td><td>Pahokee</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palatka</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Bay</td><td>Flordia</td></tr>
<tr><td><input type="checkbox" /></td><td>Palm Beach Gardens</td><td>Flordia</td></tr>
</table></td><tr>
</table>
Should I include an extra control for unchecking the "primary", or just extend the functionality of the CheckBox or RadioButton ?
If you think extra RadioButton, where would that go, in the header?
BTW, it looks like JavaScript is needed to make RadioButtons work in a GridView anyway because of ASP.Net munging the GroupName.
Update 2:
Also, see ASP.NET AJAX extender MutuallyExclusiveCheckBox
Definitely use radio buttons, as they are meant for this purpose. Why confuse the user with checkboxes and further trouble yourself by writing code to maintain exclusive behaviour?
Though I don't agree with changing the expected functionality of radio and checkbox controls, I have had cases where I needed to.
If you do this with Javascript, it's going to fail spectacularly if your user has JS disabled.
The appearance CSS attribute is your friend.
If the user can pick only one choice out of a set, use radiobuttons. If the user can pick any number of choices, use checkboxes. Note that the definition of "only one choice" can include a radiobutton that says "none".
That's been the standard on pretty much every platform since GUIs were invented. Deviating from that practice will only serve to confuse your users.
Like other people have said, you shouldn't change the expected behaviour of native form elements. I would use a group of radio buttons, and include a button for 'clear selection'. That makes it explicit that the selection is clearable, and provides an obvious way of doing it.
Another way to do it would be to 'invent' a new type of control - probably based on hidden radio buttons, perhaps something that obviously looked like a group of 'toggles'. This is a very visual solution though, and would rely on javascript, so it's probably not the most reliable choice.
Here's an example of both solutions:
http://www.spookandpuff.com/examples/clearableOptions.html
Both solutions are currently javascript reliant - you could easily give the first option a JS-free fallback by having the clear button give the form to the server, and respond with a cleared radio button set.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
Here's an example of a regular standard HTML input for my radiobuttonlist:
<label><input type="radio" name="rbRSelectionGroup" checked value="0" />None</label>
<asp:Repeater ID="rptRsOptions" runat="server">
<ItemTemplate>
<div>
<label><input type="radio" name="rbRSelectionGroup" value='<%# ((RItem)Container.DataItem).Id %>' /><%# ((RItem)Container.DataItem).Name %></label>
</div>
</ItemTemplate>
</asp:Repeater>
I removed some stuff for this thread, one being I put an r for some name that I do not want to expose here so just an fyi.
Now, I would assume that this would or should happen:
Page loads the first time, the None radio button is checked / defaulted
I go and select a different radiobutton in this radiobutton list
I do an F5 refresh in my browser
The None radio button is pre-selected again after it has come back from the refresh
but #4 is not happening. It's retaining the radiobutton that I selected in #2 and I don't know why. I mean in regular HTML it's stateless. So what could be holding this value? I want this to act like a normal input button.
I know the question of "why not use an ASP.NET control" will come up. Well there are 2 reasons:
The stupid radiobuttonlist bug that everyone knows about
I just want to brush up more on standard input tags
We are not moving to MVC so this is as close as I'll get and it's ok, because the rest of the team is on par with having mixed ASP.NET controls with standard HTML controls in our pages
Anyway my main question here is I'm surprised that it's retaining the change in selection after postback.
This is a Firefox behavior.
Firefox will persist form values when you reload a webpage.
For example, if you go to StackOverflow's Ask Question page, enter some text, and reload the page, Firefox will remember the text, but IE will not.
If you re-request the page (as opposed to refreshing it) by pressing Enter in the address bar, the form will not be persisted.
I'm adding multi language support to a prototype web site. The site was developed using html lables which I could multilanguage using asp:literal or I could change them all to asp:labels as shown below.
<asp:label ID="lblAddress1" runat="server" Text='<%$ Resources:lblAddress1 %>' /></br>
<label><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:lblAddress1 %>"></asp:Literal></label>
Web stuff isn't my area of expertise and the guys here don't think there is any advantage one way or the other. What would you choose and why?
<asp:Literal>
Use this control as a placeholder for any text you wish to insert in the page. The output will not be wrapped in any html markup tags (simplest).
<asp:Label>
Use this control in the same way as the , however, This control will wrap the text in html tags. These span tags allow the control to have additional properties (css styling etc.) which can be leveraged.
<label>
This html tag has semantic value in a page and is used to associate form elements with their description.
<label for="SaveLoginName">Remember Me:</label>
<input type="checkbox" id="SaveLoginName" />
A browser can use this info to provide additional accessibility features such as enabling clicking text to toggle checkbox value.
Each of these have appropriate usage scenarios.
Seems to be a matter of taste. Although I think the second option may add a little weight to the page because literals are usually wrapped in <span>