can somelone explain why i can't unselect or select multiple times my radio button input ? Here is my code:
<div id="grade">
<label id="gradeName">Grade</label>
<input type="radio">
<label for="">5</label>
<input type="radio">
<label for="">6</label>
<input type="radio">
<label for="">7</label>
<input type="radio">
<label for="">8</label>
<input type="radio">
<label for="">9</label>
<input type="radio">
<label for="">10</label>
</div>
For example if i want to unselect the value i can't, can this be fixed in html or i need js for this ?
Radio buttons are designed so that at all times one member of the radio group is selected.
You have not checked one by default, so none start out in the checked state.
You have not given them names so they aren't grouped (each is in a group consisting of just itself).
An an aside, a label is for labelling a single form control. You can't use a label to label an entire radio button group. That is what the fieldset element is for.
<fieldset>
<legend>Radio Example</legend>
<label><input type="radio" name="groupName" value="1" checked> 1</label>
<label><input type="radio" name="groupName" value="2"> 2</label>
<label><input type="radio" name="groupName" value="3"> 3</label>
</fieldset>
If you want each button to have two states, so you can check and uncheck them freely, use checkboxes:
<fieldset>
<legend>Checkbox Example</legend>
<label><input type="checkbox" name="groupName" value="1" checked> 1</label>
<label><input type="checkbox" name="groupName" value="2"> 2</label>
<label><input type="checkbox" name="groupName" value="3"> 3</label>
</fieldset>
Your approach is not right. By reading https://en.wikipedia.org/wiki/Radio_button you can understand that the purpose of the radio button is to choose only one value from a list of items. If you want to have the check/uncheck behavior you should use checkboxes and apply styles to look like radio buttons.
Related
I basically want to create a select element, where the options are displayed next to each other horizontally. Like this:
How can I implement this design?
Using a basic form a radio button would be one way to do it and then hide the actual input using css while keeping the label
Hide radio button while keeping its functionality
then you are just styling the labels how you want them
<form action="form action goes here">
<input type="radio" value="1">
<label for="1">1</label>
<input type="radio" value="2">
<label for="2">2</label>
<input type="radio" value="3">
<label for="3">3</label>
<input type="radio" value="1">
<label for="3">3</label>
...and so on
</form>
In the following code:
<form>
<input type="radio" style="disabled:true">Alpha<br>
<input type="radio" style="enabled:false">Beta<br>
<input type="radio">Gamma<br>
</form>
1) Why is it allowing me to select more than one radio button at a time?
2) How to I "grey out" specific radio buttons? The "enabled" and "disabled" attributes do not seem to be working.
To make a group of radio buttons, give them all the same name:
<form>
<input type="radio" name="group1">Alpha<br>
<input type="radio" name="group1">Beta<br>
<input type="radio" name="group1">Gamma<br>
</form>
Demo
To disable a radio button, use the disabled attribute in its tag:
<form>
<input type="radio" name="group1">Alpha<br>
<input type="radio" name="group1">Beta<br>
<input type="radio" name="group1" disabled>Gamma<br>
</form>
Demo
Disabled is not a CSS attribute so it is not defined within the style attribute.
As commented above you can also wrap the <input> in a <label> tag like so:
<form>
<label><input type="radio" name="group1">Alpha</label><br>
<label><input type="radio" name="group1">Beta</label><br>
<label><input type="radio" name="group1" disabled></label>Gamma<br>
</form>
Or you can link the label with the inputs id:
<label for="alpha">Alpha</label>
<input type="radio" name="group1" id="alpha">
Then the user can click on the text instead of just the radio button.
Demo
The disabled attribute isn't a css style. You disable an input like this:
<form>
<input type="radio" name="radGroup">Alpha<br>
<input type="radio" name="radGroup" disabled>Beta<br>
<input type="radio" name="radGroup">Gamma<br>
</form>
notice also the name attribute. This will prevent multple radio buttons been selected at once. Each input in the group must share the same name
DEMO
a group of radiobuttons must have the same same to select only one:
use the html disabled attribute to disable a radio <input type="radio" disabled>
so your solution would be:
<form>
<input type="radio" name="rb1">Alpha<br>
<input type="radio" name="rb1">Beta<br>
<input type="radio" name="rb1" disabled>Gamma<br>
</form>
I want these radio inputs to stretch across the screen, rather than one beneath the other:
HTML
<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change
CSS
input[type="radio"] {
margin-left:10px;
}
http://jsfiddle.net/clayshannon/8wRT3/13/
I've monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven't found one.
In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (updated example).
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
I'd suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s for attribute with the <input>'s id: (example)
<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>
<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>
<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>
..or wrap the <label> elements around the <input> elements directly: (example)
<label>
<input type="radio" name="editList" value="always"/>Always
</label>
<label>
<input type="radio" name="editList" value="never"/>Never
</label>
<label>
<input type="radio" name="editList" value="costChange"/>Cost Change
</label>
You can also get fancy and use the :checked pseudo class.
This also works like a charm
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
To get your radio button to list horizontally , just add
RepeatDirection="Horizontal"
to your .aspx file where the asp:radiobuttonlist is being declared.
Here is updated Fiddle
Simply remove </br> between input radio's
<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.
From what I have gathered, in order to make a label of a radio button clickable, you must assign the same "name" attribute value to both elements.
The problem I am having is when you have more than one radio button, say a "yes or no" type selection. In order to make it to where if you click one, the other disables is that both radio buttons "name" attribute has to be the same value.
Is it possible to do both?
<label for="no">No</label>
<input type="radio" name="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="yes" value="yes" />
id (not name) attribute should be referred by label's for attribute. It should be like this: http://jsfiddle.net/zzsSw/
<label for="no">No</label>
<input type="radio" name="mygroup" id="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="mygroup" id="yes" value="yes" />
You can also write labels without IDs:
<label>
<input type="radio" name="mygroup" />
My clickable caption
</label>
or checkbox
<label>
<input type="checkbox" name="mygroup[]" />
My clickable caption
</label>