隐藏单选按钮上的OnClick事件

Question

我正在使用bootstrap。在UI上，我必须显示多个按钮，它应该表现为单选按钮。

<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>

我想点击这些按钮调用onclick功能。但似乎并没有奏效。

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

任何想法，我怎样才能做到这一点。任何替代方式也将受到欢迎。谢谢！

http://getbootstrap.com/javascript/

Answer 1

使用JQuery而不是内联处理程序绑定您的单击处理程序总是一个好习惯，如下所示：

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

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

查看此Fiddle

Answer 2

从此页面：Twitter Bootstrap onclick event on buttons-radio

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

如果要从选中的单选按钮检索值，则必须添加到每个单选按钮：

value="myValue"

您可以使用以下方法检索此值：

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

Answer 3

jQuery最简单的方法

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

您可以使用data属性传递参数

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

和jQuery将是

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