How to check multiple radio button, radio buttons having same name? - html

Question

I want to check multiple radio buttons, all radio buttons having same name but different ids.
Here is my html code,
<span style="float:left;margin:0 0 0 10px">Proactivity</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Service/support</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label>

Answer 1

You can't. Radio buttons are there for a single choice. For multiple choices, you need checkboxes.

Answer 2

Wrapping your radio buttons in the form tag will allow for groups of radio buttons with the same name to function independently from each other.
http://jsfiddle.net/8qB56/
But looking at what you are trying to do, it is more appropriate for you to change the input name of each logical question, since you are working with what looks like a single form.
So perhaps you can change name="q11[]" to name="q11[proactivity]" for the proactivity question inputs, name="q11[service]" for the service question inputs, and name="q11[provision]" for the provision question inputs.
Doing this will allow all the selected responses from these inputs to stay in the q11 field on the server side, you can then massage the data however you want (I'm assuming q11 stands for "question 11" or something so that's why you are so insistant on keeping the same name for all these inputs).

Answer 3

When you use same name for all radio input they all fall in one group. It won't allow you to make separate actions.
You have to use different names for each radio group

Answer 4

Using radio buttons to select multiple items seems against the usability rule. If you do, you can provide different name for them.
PS: you should provide an external style sheet for every radio button. It'll be great if you want to make an adjustment later.

Answer 5

It works pls follow the link
http://jsfiddle.net/Cwalkdawg/3CxLD/2/
Since you insist using radios, I would go with a jQuery library to get your values. You can add a class to your radios and it will allow you to select that class and iterate through it. It's counter-intuitive and dirty, but it will work. This markup:
<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />
Goes with this jQuery:
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
In the fiddle, I added checkboxes too, just to show you how much more easy it is i.e. the following markup (which reads easier and is not as ambiguous):
<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />
Goes with this jQuery:
$("#button").click(function () {
//Check boxes
$("input:checkbox[name=choices]:checked").each(function() {
console.log("Checkbox: " + $(this).val());
});
});
You can't deselect a radio button unless you want to deselect all of them using either a reset element, which will reset your entire form, or creating a custom function just for radios (that would clear all the choices anyway).
The deselect could be routed to your name=None radio button with the following code:
$(".rad[name=None]").click(function() {
$(".rad").removeAttr("checked");
});

Answer 6

You can also put a number (a counter if you use js) inside your name-array like this:
Proactivity:
<input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">
Service/support:
<input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">
Provision of specialist skills:
<input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">