Jquery-UI radio button

Question

I am using two groups of radio buttons

Group 1:

• State
• City

Group 2:

• A-C
• D-H
• I-M
• N-R
• S-Z

When I toggle between state and city, I want A-C from group 2 to be set to checked while the others are set to unchecked.

I have it working in this fiddle here fiddle

HTML:

<div id="sort-radio">
    <input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
    <input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>

<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
    <label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
    <label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
    <label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
    <label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
    <label for="S-Z">S-Z</label>
</div>

JavaScript:

$(function () {
    $("#sort-radio").buttonset();
});

$(function () {
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});

document.getElementById("byState").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

document.getElementById("byCity").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

However, when I use this exact code in my website, it does not work (it leaves the previously selected button from group 2 selected). I am using jquery-ui-1.10.1.custom.css which displays the radio buttons nicely, as found here: jquery ui button.

Any clue why this would affect it? When I remove the line <link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" /> from my index.php, it works beautifully.

Answer 1

A few problems:

1. The button widget works by responding to click events on the radio button's label. This means that the click event you are listening to on the radio buttons themselves won't get fired, since you actually aren't clicking the radio buttons themselves, but their labels. You can work around this by using the change event.

2. You need to call .buttonset('refresh') after manually updating the checked state of a radio button.

3. Just setting the checked attribute on one radio button in a group is enough to make the rest become unchecked automatically. You shouldn't need to set the checked property on each one.

4. You should put your event handlers inside the document.ready handler as well. You can also just use one instead of two.

With all of those things in mind, here are the changes I would make:

$(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');

    document.getElementById("byState").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);

    document.getElementById("byCity").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);
});

Example: http://jsfiddle.net/Fzq8L/2/