My form radio buttons don't work

Question

Some simple HTMl, I've added spans for styling, should I be using labels instead? It's meant to only allow one selected at a time. What am I doing wrong? I am codeblind :P

JSfiddle here.

Thanks.

Answer 1

A radio group is created by a having a number of radio buttons with the same name.

You have a number of radio groups, each containing one button.

You shouldn't add labels for styling, but you should add labels for associating the label of a radio button with the radio button.

Answer 2

you need to group the radio buttons as such:

<form>
    <span id="betalfakturavalg">
        <input type="radio" name="group1" title="Valg Faktura"
        onclick="document.getElementById('betalfakturavalg').style.cssText='border-color:#85c222; background-color:#E5F7C7;';" /> Faktura - For bedrifter  
    </span>
    <br>
    <span id="betalkortvalg">
        <input type="radio" name="group1" title="Valg Kreditkort"
        onclick="document.getElementById('betalkortvalg').style.cssText='border-color:#85c222; background-color:#E5F7C7;';" /> Kreditkort - For alle privatpersoner
    </span>
</form>

Answer 3

Use single name in the radio button,

<form>
    <span id="betalfakturavalg">
        <input type="radio" name="betalfakturavalg" title="Valg Faktura"
        onclick="document.getElementById('betalfakturavalg').style.cssText='border-color:#85c222; background-color:#E5F7C7;';" /> Faktura - For bedrifter  
    </span>
    <br>
    <span id="betalkortvalg">
        <input type="radio" name="betalfakturavalg" title="Valg Kreditkort"
        onclick="document.getElementById('betalkortvalg').style.cssText='border-color:#85c222; background-color:#E5F7C7;';" /> Kreditkort - For alle privatpersoner
    </span>
</form>