CODEWITHSUNDEEP
phpjavascriptjqueryradio-button
user1231561
user1231561

Reputation: 3359

Selecting multiple radio buttons (through jquery, javasscript?)

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>

Upvotes: 2

Views: 2595

Answers (3)

Mihai Iorga
Mihai Iorga

Reputation: 39704

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

Upvotes: 3

jerjer
jerjer

Reputation: 8760

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

Upvotes: 0

nickf
nickf

Reputation: 545995

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

Upvotes: 5

Related Questions