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/

Answer 2

Since you are using jQuery, you can simplify this a great deal by adding a class to the radio buttons - of which only one can be "set" SO listen to the change event on those. Remove the extra function at the start, pick one of the "array" of buttons to click from the second group. (since only one can be picked)

Simpler version markup :

<div id="sort-radio">
    <input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
    />
    <label for="byState">By State</label>
    <input type="radio" class="picker" id="byCity" name="sort-radio"
    />
    <label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
    <input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
    checked='true' />
    <label for="A-C">A-C</label>
    <input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
    />
    <label for="D-H">D-H</label>
    <input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
    />
    <label for="I-M">I-M</label>
    <input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
    />
    <label for="N-R">N-R</label>
    <input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
    />
    <label for="S-Z">S-Z</label>
</div>

Code:

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
    $('#alphabet-radio').buttonset('refresh');
});

Working example:http://jsfiddle.net/MarkSchultheiss/8x28x/2/

Set back second group, first to item when either of first group is changed:

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq(0).prop("checked", true);
    $("#alphabet-radio").buttonset("refresh");
});

Fiddle for that: http://jsfiddle.net/MarkSchultheiss/8x28x/3/