CODEWITHSUNDEEP
jquery
user3046061
user3046061

Reputation: 353

How to manage events for a series of group of radio buttons?

I have this form on a website and need some help figuring out how to make the jquery code do what I want it to do.

The form looks like this:

<div>
 <h4>Pick an option</h4>
 <input type="radio" name="class" value="tree" checked/>Biological <br />
 <input type="radio" name="class" value="radial tree"/>Geological<br />
 <input type="radio" name="class" value="dendogram" />Chemical<br />
</div>

What I want to do is display in another div information regarding each option. I'd like this behavior over a hover jquery event. The info text is different for every option of course. I don't want to trigger that event on page load since I already have a default value selected.

What I have going so far is this:

var Sel = $("input[name=class]:radio").get();

$.each( Sel, function(index, object) {
    $(this).hover(function() {
        $( "#infodiv" ).slideDown( "slow", function() {
            $("infodiv").addClass('infodivstyle').text('Details here');
        });
    });
});

What this does so far is just display that text over hovering one of the radios.

Further I'd like to display a custom text according to the value attribute on the respective html radio element. I also want the infodiv to be hidden once the mouse is somewhere else on the page from the div with the radios.

Anyone have an idea on how to accomplish this?

Upvotes: 0

Views: 48

Answers (2)

Scott Murphy
Scott Murphy

Reputation: 448

I think you are missing a <div> from your question:

<div>
 <h4>Pick an option</h4>
 <input type="radio" name="class" value="tree" checked="checked" data-description="bio"/>Biological <br />
 <input type="radio" name="class" value="radial tree" data-description="geo"/>Geological<br />
 <input type="radio" name="class" value="dendogram" data-description="chem"/>Chemical<br />
</div>

<div id="infodiv" >
    some initial description
</div>

With that in place and by using the data- functionality of jQuery you can add a mouseover event listener like this:

$(document).on('mouseover',"input[name='class']",function(){
    var desc = $(this).data('description');
    $('#infodiv').text(desc);
});

Here is a working fiddle

Upvotes: 1

mts7
mts7

Reputation: 583

I'm not sure what all of your requirements are, but this will display the text per type.

<style>
.details {
    display: none;
}
</style>

<div>
    <h4>Pick an option</h4>
    <input type="radio" name="class" value="tree" checked="checked" class="option" />Biological <br />
    <input type="radio" name="class" value="radial tree" class="option" />Geological<br />
    <input type="radio" name="class" value="dendogram" class="option" />Chemical<br />
</div>
<div id="details-tree" class="details">Bio Stuff</div>
<div id="details-radial_tree" class="details">Geo Stuff</div>
<div id="details-dendogram" class="details">Chem Stuff</div>

<script>
$(function() {
    $('.option').on('mouseover', function(e) {
        console.log(e);
        $('.details').slideUp('fast');
        var $input = $(e.currentTarget);
        var val = $input.val().replace(' ', '_');
        $('#details-' + val).slideDown('slow');
    });
});
</script>

Upvotes: 1

Related Questions