Selecting multiple radio buttons (through jquery, javasscript?)

Question

I currently have a form with lets say 5 radio button entries (see below). What im looking archive is the following: - Being able to choose multiple radio buttons - lets say 3 and submit the form.

Currently I got it working fine with PHP, SQL, but im only able to choose one radiobutton and submit that.

I figure it would also come in handy being able to deselect a radio button in case you wrongly click one.

My guess is that this can be done through some javascript? Any suggestions? Online examples perhaps?

<form id="pollform" action="poll.php" method="post">
<input id="option-1" type="radio" value="1" name="poll">
<label for="option-1">Select option 1</label>

<input id="option-2" type="radio" value="2" name="poll">
<label for="option-2">Select option 2</label>

<input id="option-3" type="radio" value="3" name="poll">
<label for="option-3">Select option 3</label>

<input id="option-4" type="radio" value="4" name="poll">
<label for="option-4">Select option 4</label>

<input id="option-5" type="radio" value="5" name="poll">
<label for="option-5">Select option 5</label>
</form>

Why not use a checkbox group instead? That's why there are checkboxes and radio buttons, for different situations. — Hallaghan, Aug 18 '11 at 09:53
Ok, guess I can see that I need to use checkboxes :) However, I guess I still need to use some javascript to actually count that the user has checked 3 boxes and trying to select checkbox nr 4 would not be possible? — user1231561, Aug 18 '11 at 10:01
Think I figured it out myself - posted answer below :) Thanks for your help! — user1231561, Aug 18 '11 at 13:03

score 5 · Answer 1 · answered Aug 18 '11 at 09:52

Radio buttons are designed so that only one option from each group (as designated by their shared name) can be selected at once (just like you can only tune a radio to one station).

The input control which allows any number of options to be selected is the checkbox. If you append [] to their names, then the selected options will arrive on the PHP side as an array.

<input type="checkbox" value="1" name="poll[]" />
<input type="checkbox" value="2" name="poll[]" />

Mihai Iorga · Accepted Answer · 2011-08-18T10:06:23.250

As it has same name poll you will not be able to do that as input type radio is specialized in selecting a single value from multiple inputs.

You can use input type checkbox for that and make them as an array:

<form id="pollform" action="poll.php" method="post">
    <input id="option-1" type="checkbox" value="1" name="poll[]">
    <label for="option-1">Select option 1</label>

    <input id="option-2" type="checkbox" value="2" name="poll[]">
    <label for="option-2">Select option 2</label>

    <input id="option-3" type="checkbox" value="3" name="poll[]">
    <label for="option-3">Select option 3</label>

    <input id="option-4" type="checkbox" value="4" name="poll[]">
    <label for="option-4">Select option 4</label>

    <input id="option-5" type="checkbox" value="5" name="poll[]">
    <label for="option-5">Select option 5</label>
</form>

LIMIT (with jQuery) the number:

$("input[type=checkbox][name=poll[]]").click(function() {
    var numberSel = $("input[type=checkbox][name=poll[]]:checked").length >= 3;     
    $("input[type=checkbox][name=poll[]]").not(":checked").attr("disabled",numberSel);
});

Alrighty I think thats pretty straightforward - but just to set it in scenario of what im looking to do with the radio buttons - which is that the user needs to choose 3 checkboxes and shouldnt be able to choose more than that - any suggestion on such an approach? — user1231561, Aug 18 '11 at 10:03
Thanks Mihai - I managed to get it working with your guidance. — user1231561, Aug 18 '11 at 12:16
Just one additional thing I was thinking of - could I use the same basic approach to disable the submit button, and then enable it when 3 checkboxes has been checked? — user1231561, Aug 18 '11 at 12:20

score 0 · Answer 3 · answered Aug 18 '11 at 09:54

0

Radio buttons are designed for only 1 item to be selected, use checkboxes instead.

answered Aug 18 '11 at 09:54

jerjer

8,694
30
36

2

That's not quite an answer for the OP but rather a clarification. Please comment under the OP's question for clarifications, if you're not answering his question. – Hallaghan Aug 18 '11 at 09:55

Selecting multiple radio buttons (through jquery, javasscript?)

3 Answers3