javascript jquery单选按钮单击

Dav*_*801 85 javascript jquery

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

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Run Code Online (Sandbox Code Playgroud)

现在,使用按钮我可以设置onClick来运行一个功能.当我点击其中一个时,单选按钮运行功能的方法是什么?

Pet*_*lly 156

你可以用.change你想要的

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

从jQuery 1.3开始

你不再需要'@'.正确的选择方式是:

$("input[name='lom']")
Run Code Online (Sandbox Code Playgroud)

  • 请注意,从jQuery 1.3开始,您不再需要'@'.正确的选择方式是:`$("input [name ='lom']")` (7认同)
  • 是否有可能将此解决方案与@JohnIdol的解决方案集成在基于无线电值的条件语句中?ex` $("input [name ='lom']").change(function(){if($(this).val()==='1'){..... // rest条件语句基于这里的值};` (4认同)

Joh*_*dol 48

如果你的无线电放在一个id = radioButtonContainerId的容器中,你仍然可以使用onClick,然后检查选择了哪一个,并相应地运行一些功能:

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


Bis*_*nna 19

<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()
Run Code Online (Sandbox Code Playgroud)


Ada*_*zyk 10

这应该是好的

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});
Run Code Online (Sandbox Code Playgroud)


Zer*_*roK 8

有几种方法可以做到这一点.无论如何,强烈建议在单选按钮周围放置一个容器,但您也可以直接在按钮上放置一个类.使用此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>
Run Code Online (Sandbox Code Playgroud)

你可以按班选择:

$(".shapeButton").click(SetShape);
Run Code Online (Sandbox Code Playgroud)

或按容器ID选择:

$("#shapeList").click(SetShape);
Run Code Online (Sandbox Code Playgroud)

在任何一种情况下,事件都将在单击单选按钮或其标签时触发,但奇怪的是在后一种情况下(通过"#shapeList"选择),单击标签将因某种原因触发单击功能两次,至少在FireFox中; 按类选择不会那样做.

SetShape是一个函数,看起来像这样:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}
Run Code Online (Sandbox Code Playgroud)

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