隐藏单选按钮上的 OnClick 事件答案

【问题标题】：OnClick event on hidden radio button隐藏单选按钮上的 OnClick 事件
【发布时间】：2015-05-12 08:11:18
【问题描述】：

我正在使用引导程序。在 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/

【问题讨论】：

好像你忘记了onclick="javascript:a();中的“选项2和选项3”
你也忘了关闭标签输入，就像这个<input type="radio" name="options" id="option1" onclick="javascript:a();" autocomplete="off" checked> Radio 1 (preselected)
请不要投反对票。这只是一个示例代码。我将编辑完整的信息。
是我否决了它。但是您应该明确地查看您的 HTML。尝试将其放入 Fiddle 并进行测试。
不要认为关闭输入是强制性的。反正。那不是问题的原因。查看附件图片

标签： jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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'))
    })

【讨论】：

问题是，在我的实际代码中，我在该函数中传递了多个参数。可能无法通过这种方式获得。
可以使用数据属性

【解决方案2】：

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

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

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

看看这个Fiddle

【讨论】：

这行得通。但我的问题是这个 onclick 我在多个 javascript 循环中调用，并且 onclick 函数根据循环值采用多个参数。我可以选择那些按钮类型 UI 的输入单选，但我怀疑由于 display:none 属性它无法调用 onclick 方法。有没有其他方法可以做到这一点？
为什么需要'display:none'？使用此属性，您甚至无法单击单选按钮。
需要传递什么样的参数？
我不想在 UI 上显示单选按钮标志。没有显示：无，我在按钮内获得单选按钮。我不需要。：/没有显示：无，它正在工作。刚刚检查过
我通过 ajax 调用以 json 格式获取大量数据。我正在迭代，然后在 UI 上创建按钮。我在 onclick 参数中添加的那些迭代值，我在函数中接收，然后调用其他东西。

【解决方案3】：

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

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

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

value="myValue"

您可以通过以下方式检索此值：

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

【讨论】：