javascript jquery单选按钮单击

Question

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

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

现在，用一个按钮我可以设置onClick来运行一个函数。当我单击其中一个按钮时，单选按钮的运行方式是什么？

Answer 1

可以使用.change您要

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

什么在jQuery 1.3

的你不再需要 '@'。选择正确的方法是：

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

Answer 2

这应该是很好的

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

Answer 3

如果你在一个容器中的无线电设备使用id = radioButtonContainerId你仍然可以使用的onClick然后检查选择其中之一，并相应地运行一些功能：

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

Answer 4

限制DOM搜索总是好的。所以更好地使用父母，以便整个DOM不会被遍历。

IT IS VERY FAST

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

Answer 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（）中设置不同的行为来执行不同的操作。

Answer 6

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