javascript jquery单选按钮单击答案

【问题标题】：javascript jquery radio button clickjavascript jquery单选按钮单击
【发布时间】：2011-02-28 12:58:54
【问题描述】：

我有 2 个单选按钮和 jquery 正在运行。

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

现在，我可以通过一个按钮设置 onClick 来运行一个函数。当我点击其中一个单选按钮时，如何让单选按钮运行功能？

【问题讨论】：

注意。最好不要让表单元素响应点击，因为许多人使用键盘浏览表单。

标签： javascript jquery

【解决方案1】：

您可以使用.change 来满足您的需求

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

从 jQuery 1.3 开始

您不再需要“@”。正确的选择方式是：

$("input[name='lom']")

【讨论】：

请注意，从 jQuery 1.3 开始，您不再需要 '@'。正确的选择方式是：$("input[name='lom']")
是否可以将此解决方案与以下@JohnIdol 的解决方案与基于无线电值的条件语句集成？前$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
从 jQuery 1.3 开始，您不应该将 '@' 与 name 属性一起使用。如果这样做，您将收到jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expression 错误。所以这不是选择的问题。

【解决方案2】：

如果您将收音机放在 id = radioButtonContainerId 的容器中，您仍然可以使用 onClick，然后检查选择了哪个并相应地运行一些函数：

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

【讨论】：

谢谢。这对我有用，因为我的字段是数组的一部分，我不能使用 input[name='xxx'] 表示法 -
即使您按下 Tab 键并用箭头键移动标记，它是否也会做出反应？
this won't work in mobile # selector is not working in mobile.

【解决方案3】：

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

【讨论】：

虽然这个答案没有显示如何将代码连接到事件，但我喜欢它包含有关如何检索单选按钮组值的信息。
$("input[@name='lom']").change(function(){ // 在这里做一些有趣的事情 });

【解决方案4】：

应该不错

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

【讨论】：

你错过了一个);在后面。

【解决方案5】：

有几种方法可以做到这一点。无论如何，强烈建议在单选按钮周围放置一个容器，但您也可以直接在按钮上放置一个类。使用此 HTML：

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

您可以按班级选择：

$(".shapeButton").click(SetShape);

或按容器 ID 选择：

$("#shapeList").click(SetShape);

在任何一种情况下，事件都会在单击单选按钮或标签时触发，但奇怪的是在后一种情况下（通过“#shapeList”选择），单击标签会触发单击功能两次原因，至少在 FireFox 中；按班级选择不会这样做。

SetShape 是一个函数，看起来像这样：

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

这样，您可以在按钮上添加标签，并且可以在同一页面上拥有多个执行不同操作的单选按钮列表。您甚至可以根据按钮的值在 SetShape() 中设置不同的行为，让同一列表中的每个单独按钮执行不同的操作。

【讨论】：

【解决方案6】：

限制 DOM 搜索总是好的。所以最好也使用父级，这样就不会遍历整个 DOM。

速度非常快

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

【讨论】：