CODEWITHSUNDEEP
htmlradio-button
Symfony
Symfony

Reputation: 2439

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

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>

Upvotes: 10

Views: 69910

Answers (6)

Paolo Torasso
Paolo Torasso

Reputation: 1

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

Upvotes: 0

Sam
Sam

Reputation: 1104

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

Upvotes: 1

Andrew Ho
Andrew Ho

Reputation: 583

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

Upvotes: 13

Dipak
Dipak

Reputation: 12190

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

Upvotes: 4

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9713

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.

Upvotes: 2

Florian Margaine
Florian Margaine

Reputation: 60747

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

Upvotes: 16

Related Questions