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

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>

Oscilloscope

You cannot have multiple elements with the same ID, all IDs must be unique. All those id="qq[]" and id="qqa[]" need to be changed. – Crime

Not to mention the labels pointing to the same element. – Sanalda

Answer 1

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

Sanalda

I use checkboxes but when i click "Good" it should be uncheck "Poor" – Oscilloscope

Then use radio boxes, and each "group of radio boxes" needs to have the same unique name. Another group of radio boxes needs to have a different name. – Sanalda

but when i need same name to insert values in database – Oscilloscope

Then you got something wrong. I've told you the way it works, you have to adapt your server side. – Sanalda

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).

Genius

Doing this will allow all the selected responses from these inputs to stay in the q11 field on the server side I've tried doing so and unfortunately its NOT true. When you name your radio button groups name="q11[proactivity]" and name="q11[service]" they are received as seperate fields at server side (not as q11[] array) – Sollows

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

Makeyevka

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.

Sylviesylvite

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");
});

Quadrivial

OP asks for radio buttons with the 'same name'. – Conferral

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]">

Emmittemmons