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.

@AndrewWhitaker - I am new to fiddle...I tried adding an external jquery .css file but not sure how to get it to work. — user2107906
– user2107906, Commented Mar 12, 2013 at 22:47
I added the CSS to the fiddle and don't see a problem: jsfiddle.net/FRFdk/170 — Andrew Whitaker
– Andrew Whitaker, Commented Mar 12, 2013 at 22:52
@AndrewWhitaker - Sorry, I had accidentally included the wrong fiddle. The link is now updated. The fiddle you sent does not display the radio buttons as modified by the jquery ui css — user2107906
– user2107906, Commented Mar 12, 2013 at 22:53

Andrew Whitaker · Accepted Answer · 2013-03-12 23:05:49Z

2

A few problems:

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.
You need to call .buttonset('refresh') after manually updating the checked state of a radio button.
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.
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/

answered Mar 12, 2013 at 23:05

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2107906 Over a year ago

That is perfect. Thank you for the instructive feedback, it really helps me understand your answer. I noticed in the fiddle you added the framework/extension as well. Very helpful.

Mark Schultheiss · Accepted Answer · 2013-03-13 11:40:05Z

0

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/

edited Mar 13, 2013 at 11:40

answered Mar 12, 2013 at 23:37

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

2 Comments

user2107906 Over a year ago

I tried your fiddle, and it almost works. Clicking "By State" resets the alphabet radio to A-C, but clicking "By City" resets the alphabet radio to D-H. Thanks for your help.

Mark Schultheiss Over a year ago

I thought that was your requirement, if not, you question is not clear. If you mean you want it BACK to A-C when either one is clicked, then you can make it even simpler...Will add that example.

Collectives™ on Stack Overflow

Jquery-UI radio button

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related