jQuery: perform specific action on radio button selection

Question

I have couple of radio buttons from bootstrap like below.

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
 <input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
 <input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
 <input type="radio" name="options" id="option3"> Option 3
</label>
</div>

How can I perform specific action for each radio button in jQuery?

for instance:

if option1 is checked -> load "html1.html"
if option2 is checked -> load "html2.html"

And I use this code to load an html code in specific div :

<script>
   $(document).ready(function(){ 
       $('#main-content').load('skill-temp.html');
   });
</script>

that title smelled wrong ;) – mplungjan May 09 '14 at 09:49 — mplungjan, May 09 '14 at 09:49

score 1 · Answer 1 · answered May 09 '14 at 09:48

1

You can do something like this:

$('input[name="options"]').change(function() {
    var num = this.id.match(/\d+$/);
    $('#main-content').load('html'+num+'.html');
});

answered May 09 '14 at 09:48

Felix

37,892
8
43
55

I had to write a jsfiddle to convince myself that change is not triggered by the radio that is clicked AND the radio that was checked before – mplungjan May 09 '14 at 09:58

alou · Accepted Answer · 2014-05-09T10:07:01.447

0

I believe the easiest way is to have a data attribute in your input, guiding the jQuery load action. Something like:

 <input class="loadhtml" data-html="page1" type="radio" name="options" id="option1">
 <input class="loadhtml" data-html="page2" type="radio" name="options" id="option2">
 <input class="loadhtml" data-html="page3" type="radio" name="options" id="option2">

and then

 <script>
 $('input.loadhtml').on('change', function(){
    var data = $(this).data('html');
    $('#main-content').load(data + '.html');
 });
 </script>

edit

A fiddle, with the only difference i alert(data) passed instead of calling load

edited May 09 '14 at 10:07

answered May 09 '14 at 09:52

alou

1,432
13
16

I added your attributes to `` but the code is not working! – Murhaf Sousli May 09 '14 at 10:01
It does work, check this fiddle http://jsfiddle.net/VAtw6/2/ i just use alert to check the values passed instead of load. Maybe you forgot / have different class in the inputs? – alou May 09 '14 at 10:05
I'm using bootstrap radio buttons! does that make any difference? http://getbootstrap.com/javascript/ – Murhaf Sousli May 09 '14 at 10:25
I just added a class to specify in which input(s) the function should run. If you have all inputs in, let's say, a
then you would change $('input.loadhtml') to $('.myinputwrapper input') and the function would run in all inputs that are children this element. The ones (classes) you have there in your html are most likely being used elsewhere too, so you must make it a little more specific
– alou May 09 '14 at 10:43

score 0 · Answer 3 · edited May 23 '17 at 11:50

I found the Answer

$(document).on('change', 'input:radio[class^="loadhtml"]', function (event) {
 var data = $(this).data('html');
$('#main-content').load(data + '.html');
});

Add class="loadhtml" to each radio button

<div id="nav" class="btn-group btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary">
    <input class="loadhtml" type="radio" data-html="Skills" name="options"><span class="fa fa-lock"></span> About
</label>
<label class="btn btn-primary">
    <input class="loadhtml" type="radio" name="options"><span class="fa fa-unlock"></span> Skills
</label>
<label class="btn btn-primary">
    <input class="loadhtml" type="radio" name="options"><span class="fa fa-unlock"></span> Education
</label>
<label class="btn btn-primary">
    <input class="loadhtml" type="radio" name="options"><span class="fa fa-unlock"></span> Timeline
</label>
<label class="btn btn-primary">
    <input class="loadhtml" type="radio" name="options"><span class="fa fa-unlock"></span> Hobbies</label>

or just `$(document).on('change', '.loadhtml', function()` or if the radios are always there and not loaded in the .load process, `$(".loadhtml").on('change', function()` — mplungjan, May 09 '14 at 10:58
Then I would suggest you perhaps accepted http://stackoverflow.com/a/23561601/295783 — mplungjan, May 09 '14 at 11:34

Balachandran · Answer 4 · 2014-05-09T10:01:10.880

-1

$('input:radio[name="options"]').change(
        function(){

            var id =this.id;
            if ( id  == 'option1') {
               // call html page 1
            }
             else if( id  == 'option2'){
              // call html page 2

             }    

        });

edited May 09 '14 at 10:01

answered May 09 '14 at 09:52

Balachandran

9,567
1
16
26

Very inelegant. And no need to check ":checked" since change is only triggered when the radio is clicked – mplungjan May 09 '14 at 09:57

jQuery: perform specific action on radio button selection

4 Answers4