CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3
Crawling
Crawling

Reputation: 87

OnClick event on hidden radio button

enter image description here

I am using bootstrap. Where on UI, I have to display multiple button which should behave as radio button.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" onclick="javascript:a();" autocomplete="off" style="display:none;"/> Radio 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" onclick="javascript:a();" autocomplete="off" style="display:none;"/> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" onclick="javascript:a();" autocomplete="off" style="display:none;"/> Radio 3
  </label>
</div>

I want to call an onclick function on click of those buttons. But doesn't seem to be working. 

function a(){
alert("test");
}

Any idea, how can I achieve that. Any alternate way will also be welcomed. Thanks!

http://getbootstrap.com/javascript/

Upvotes: 0

Views: 2032

Answers (3)

Alex Vargas
Alex Vargas

Reputation: 406

From this page: Twitter Bootstrap onclick event on buttons-radio

$('input[name="options"]').change( function() {
  alert("test");
})

If you want to retrieve the value from the checked radio button you have to add to every radio button:

value="myValue"

And you can retrieve this value with:

  alert($(this).val());

Upvotes: 2

marsh
marsh

Reputation: 1441

the easiest way by jQuery

$('[name="options"]').click(function() {
    alert('test')
})

You can use data attributes for passing parameters

<input type="radio" name="options" data-foo="1" data-bar="2" />

and jQuery will be

$('[name="options"]').click(function() {
        alert($(this).data('foo'))
        alert($(this).data('bar'))
    })

Upvotes: 0

jmartins
jmartins

Reputation: 991

It is always a good practice to bind your click handler using JQuery instead of inline handlers, like this:

$(function(){
    $("input[name='options']").click(a);
});

function a(){
    alert("test");   
}

Check out this Fiddle

Upvotes: 1

Related Questions