javascript jquery单选按钮点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5142300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript jquery radio button click
提问by David19801
I have 2 radio buttons and jquery running.
我有 2 个单选按钮和 jquery 正在运行。
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?
现在，通过一个按钮，我可以设置 onClick 来运行一个函数。当我单击其中一个时，使单选按钮运行功能的方法是什么？
回答by Peter Kelly
You can use .changefor what you want
你可以用.change你想要的
$("input[@name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
从 jQuery 1.3 开始
you no longer need the '@'. Correct way to select is:
你不再需要'@'。正确的选择方法是：
$("input[name='lom']")
回答by JohnIdol
If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
如果您将收音机放在 id = radioButtonContainerId 的容器中，您仍然可以使用 onClick，然后检查选择了哪个并相应地运行一些功能：
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});
回答by Bishoy Hanna
<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()
回答by Adam Lukaszczyk
this should be good
这应该不错
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});
回答by ZeroK
There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
有几种方法可以做到这一点。无论如何，强烈建议在单选按钮周围放置一个容器，但您也可以直接在按钮上放置一个类。使用此 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>
you can select by class:
您可以按类别选择：
$(".shapeButton").click(SetShape);
or select by container ID:
或按容器 ID 选择：
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
在任何一种情况下，事件都会在单击单选按钮或它的标签时触发，尽管在后一种情况下（通过“#shapeList”选择）很奇怪，由于某种原因，单击标签将触发单击功能两次，在至少在 Firefox 中；按班级选择不会这样做。
SetShape is a function, and looks like this:
SetShape 是一个函数，看起来像这样：
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.
通过这种方式，您可以在按钮上添加标签，并且可以在同一页面上拥有多个单选按钮列表来执行不同的操作。您甚至可以根据按钮的值在 SetShape() 中设置不同的行为，从而让同一列表中的每个按钮执行不同的操作。
回答by Vins
it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
限制 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
});
