What I intend to do is to make each radio button group work independetly.
Please refer this http://codepen.io/anon/pen/tkqew
I want to select an option from each line, but it is selecting only one option.
In future work I want to generate this whole icon thread dynamically so please if you could suggest how I can do that.
A radio button group is created by specifying the same name attribute for the radio buttons in a group. Simply give another common name for the radio buttons in the second line so that they'll act as a different group...
Radio Button activity relies on the names. If you want a group of Radiobuttons just name the group.
<input type="radio" name="optionsRadios" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
{...}
<input type="radio" name="optionsRadios2" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
If you are using loops to creating those radio buttons, use the index (as a prefix) in the radio button name.
Like:
<input type="radio" name="first_1">
<input type="radio" name="first_2">
1 and 2 is the index here..
You can select more then one option in radio button but dont put the radio button name same as other button, every button should have unique name.
like this
<input type="radio" name="button1">
<input type="radio" name="button2">
also visit your link i have changed it
You need to give each "set" of radio buttons distinct names:
<div class="icon-thread">
<ul>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
<label class="radio" for="optionsRadios2"><i class="icon-ban-circle icon-stack-base text-error"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option2">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-moon"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option3">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-plane"></i></label>
</li>
</ul>
</div>
<div class="icon-thread">
<ul>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
<label class="radio" for="optionsRadios2"><i class="icon-ban-circle icon-stack-base text-error"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option2">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-moon"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option3">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-plane"></i></label>
</li>
</ul>
</div>
Edit: as an aside, you've misused the for attribute in the label. That should match the id of the input element.
Related
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.
<label for="foo">choose?</label>
<br>
<input id="id_1" type="radio" value="1" name="349">Google
<input id="id_2" type="radio" value="2" name="349">chrome
<br>
<input id="id_3" type="radio" value="3" name="349">Microsoft
<br>
<input id="id_4" type="radio" value="4" name="349">IE
<br>
When the key is pressed Google, Chrome button is selected at the same time.
Thank you!
If you want easy answer then go with jquery solution and don't forget to change the name of radio button or else it will be difficult with same name... See here Demo
I have added jquery onclick event and on click of google, selecting the another radio button. See fiddle for more info..hope it will help
There are two solutions :
you need to change only two radio buttons
- Google Chrome
- Microsoft IE
and in this case you can make 2 radio buttons.
second solution, you can use jquery with same html.
if id_1 clicked then also id_2 should be checked and so on with 2nd Microsoft IE.
Radio button is supposed to be allowing only a single selection. You have got a few solutions here:
Have a sub radio button.
Radio button with a different name.
Have checkboxes instead of radio buttons.
Checkboxes are really used for multiple selections.
Snippet
This would demonstrate all the solutions:
<h2>Radios</h2>
<ul>
<li>
<input type="radio" name="comp" name="comp"> Company: Google
<ul>
<li><input type="radio" name="comp-g" id=""> Chrome</li>
<li><input type="radio" name="comp-g" id=""> Chrome</li>
</ul>
</li>
<li><input type="radio" name="comp" name="comp"> Company: Microsoft</li>
<li><input type="radio" name="comp" name="comp"> Company: Apple</li>
</ul>
<h2>Checkboxes</h2>
<ul>
<li>
<input type="checkbox" name="comp" name="comp"> Company: Google
<ul>
<li><input type="checkbox" name="comp-g" id=""> Chrome</li>
<li><input type="checkbox" name="comp-g" id=""> Chrome</li>
</ul>
</li>
<li><input type="checkbox" name="comp" name="comp"> Company: Microsoft</li>
<li><input type="checkbox" name="comp" name="comp"> Company: Apple</li>
</ul>
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.