<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>
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.
I want to create a link based on labels of values of checked checkboxes. In this way the content will vary depending on the chosen checkbox.
The platform where I use my code is forbidding the use of JavaScript, so I try to overcome the issue with pure HTML.
Here are the checkboxes:
<ul>
<li>
<input type="checkbox" name="checkboxDress" id="checkboxDress"
class="style-checkbox" value="Dress">
<label for="checkboxDress">Dress</label>
</li>
<li>
<input type="checkbox" name="checkboxLongsleeve"
id="checkboxLongsleeve" class="style-checkbox"
value="Longsleeve">
<label for="checkboxLongsleeve">Longsleeve</label>
</li>
<li>
<input type="checkbox" name="checkboxCoat" id="checkboxCoat"
class="style-checkbox" value="Coat">
<label for="checkboxCoat">Coat</label>
</li>
</ul>
and my href where I want to modify the existing link:
<a href="http://www.ebaystores.de/familiare-store/_i.html?_nkw=">
<div class="searchbtn">Search</div>
</a>
Just use a form
<form action="http://www.ebaystores.de/familiare-store/_i.html">
<input type="text" name="nkw" placeholder="Type your question" />
<ul>
<li>
<input type="checkbox" name="checkboxDress" id="checkboxDress" class="style-checkbox" value="Dress">
<label for="checkboxDress">Dress</label>
</li>
<li>
<input type="checkbox" name="checkboxLongsleeve" id="checkboxLongsleeve" class="style-checkbox" value="Longsleeve">
<label for="checkboxLongsleeve">Longsleeve</label>
</li>
<li>
<input type="checkbox" name="checkboxCoat" id="checkboxCoat" class="style-checkbox" value="Coat">
<label for="checkboxCoat">Coat</label>
</li>
</ul>
<button class="searchbtn">Search</button>
</form>
The above will create
http://www.ebaystores.de/familiare-store/_i.html?nkw=...&checkboxDress=Dress
If that is not useful, you need to send it to a server process that can read the checkboxes and create the link you want and redirect
I want to mix radio and checked button like i design B here https://ux.stackexchange.com/questions/70531/using-mixed-radio-and-checkbox-buttons-is-there-any-efficiency-or-usability-ga
But i just could figure out how to do separately:
<input class="radio-input" type="radio" name="result" value="names" />
<label class="radio-label">Get names of people starting with..</label>
<input type="checkbox" id="A" name="name[]" value="n">
<label for="A">A</label>
<input type="checkbox" id="B" name="name[]" value="n">
<label for="B">B</label>
How can i do this like in design B?
You would have to put them into separate divs, and then align them to be next to each other with CSS styling.
.no-bullets {
list-style:none;
}
<h2>first row</h1>
<ul class = "no-bullets">
<li> <input type="radio" name="name"></li>
<li> <input type="radio" name="name"></li>
<ul class = "no-bullets">
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
</ul>
</ul>
</div>
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.
I was thinking about making use of <label> tags in my validation error summary on a failed form submit and I can't figure out if it is going to get me in trouble down the line. Can anyone think of a good reason to avoid this approach? Usability, functionality, design, or other issues are all helpful.
I really like the idea of clicking a line item in the error list and being jumped to the offending input element, especially in a mobile HTML scenario where vertical orientation is more common and scrolling is a pain. So far the only problem I can find is that labels don't navigate for radio buttons or checkboxes without individual IDs (Clicking a label for a single ID-tagged radio/checkbox element alters its selection). It doesn't make it any worse than no label, though.
Here is a stripped down HTML test sample of this idea (CSS omitted for simplicity).
<div class="validation-errors">
<p>There was a problem saving your form.</p>
<ul>
<li><label for="select1">Select 1 is invalid.</label></li>
<li><label for="text1">Text 1 is invalid.</label></li>
<li><label for="textarea1">TextArea 1 is invalid.</label></li>
<li><label for="radio1">Radio 1 is invalid.</label></li>
<li><label for="checkbox1">Checkbox 1 is invalid.</label></li>
</ul>
</div>
<form action="/somewhere">
<fieldset><legend>Some Form</legend>
<ol>
<li><label for="select1">select1</label>
<select id="select1" name="select1">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option selected="selected" value="value3">Value 3</option>
</select></li>
<li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li>
<li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li>
<li><ul>
<li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li>
<li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li>
<li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li>
</ul></li>
<li><ul>
<li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li>
<li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li>
<li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li>
</ul></li>
<li><input type="submit" value="Save & Continue" /></li>
</ol>
</fieldset>
</form>
The only thing I have added to make the click-capable behavior more obvious is to add a CSS rule for the labels.
.validation-errors label { text-decoration: underline; cursor: pointer; }
For the javascript validation, you should put that list down at the bottom, below the submit form, since that's where the user will be located with they try to submit and see the validation errors.
For server-side validation, you want to have it on top, like in your example.
Or if you want to remain consistent, you could have the javascript validation errors on top, but make sure that the invalid handler scrolls to the where the errors are.
Other than that, looks good! Improves usability, and the labels still have a unique relationship with their corresponding inputs.