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