). When you click on t...">
Geek asks and answers

Selected radio button and <span> updates

I have a DIV with a list of radio buttons and a "selected search" area (a <span>). When you click on the "selected search" area, a drop-down layer exits and has a DIV with a list of radio buttons. When a radio button is selected, the "selected search" area is updated using the radio button text, and the layer is reset or disappears.

Here is my HTML structure:

<div class="radio-btns"><span class="selected-search">A</span>
 <div class="radio-btns-wrapper">
  <label><input type="radio" value="a" id="a" checked>A</label>
  <label><input type="radio" value="b" id="b">B</label>
  <label><input type="radio" value="c" id="c">C</label>
  <label><input type="radio" value="d" id="d">D</label>
 </div>
</div>

Any idea how to do this using jQuery? Any help would be greatly appreciated.

Thank.

** EDIT **

Since I asked this question back in 2010, I have now improved a bit in jQuery, so here is the revised markup, since the above is not perfect.

New HTML structure:

<a href="#" class="selected-search">A</a>
<div class="radio-btns-wrapper">
    <label><input type="radio" value="a" id="a" name="radio" checked>A</label>
    <label><input type="radio" value="b" id="b" name="radio">B</label>
    <label><input type="radio" value="c" id="c" name="radio">C</label>
    <label><input type="radio" value="d" id="d" name="radio">D</label>
</div>

jQuery script:

This is an improvement in @Greg's answer below:

//If JS is available, hide the radio buttons container
$(".radio-btns-wrapper").hide();

//DIV with radio buttons will slide down when clicking on .selected-search
//The default action on the link <a> is removed (preventDefault();) to avoid having the page jump to the back top
$(".selected-search").click(function (e) {
    $(".radio-btns-wrapper").slideDown();
    e.preventDefault();
});
//Click on radio button and have target text update with radio button text
$("input[type=radio]").click(function () {
    // Alter the text of the span to the text of the clicked label
    $(".selected-search").text($(this).parent().text());
    // Now hide the radios
    $(".radio-btns-wrapper").slideUp();
});

, . : http://jsfiddle.net/rzea/vyvLvgkh/4/

+1
2

JsFiddle :

http://jsfiddle.net/g105b/VHBkP/ ( jsfiddle.net)

: http://jsfiddle.net/rzea/vyvLvgkh/5/ - . script.

$(".radio-btns").click(function() {
    $(".radio-btns-wrapper").toggle();
});

$("input[type=radio]").click(function() {
    // Alter the text of the span to the text of the clicked label.
    $(".selected-search").text($(this).parent().text());
    // Now hide the radios.
    $(".radio-btns-wrapper").hide();
});
+2

:

$('span.selected-search').click(function(){
    this.next('div.radio-btns-wrapper').toggle();
});

: http://api.jquery.com/toggle/

, , , ,

+1

More articles:


All Articles