자바 스크립트 jquery 라디오 버튼 클릭

2 개의 라디오 버튼과 jquery가 실행 중입니다.

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

이제 버튼으로 onClick을 설정하여 기능을 실행할 수 있습니다. 라디오 버튼 중 하나를 클릭 할 때 기능을 실행하는 방법은 무엇입니까?

.change원하는 것을 사용할 수 있습니다.

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

jQuery 1.3부터

더 이상 '@'이 필요하지 않습니다. 올바른 선택 방법은 다음과 같습니다.

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

id = radioButtonContainerId 인 컨테이너에 라디오가있는 경우 여전히 onClick을 사용할 수 있으며 어느 것이 선택되었는지 확인하고 그에 따라 일부 기능을 실행할 수 있습니다.

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

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

이거 좋을거야

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

이를 수행하는 방법에는 여러 가지가 있습니다. 라디오 버튼 주위에 컨테이너를 두는 것이 좋습니다.하지만 버튼에 직접 클래스를 넣을 수도 있습니다. 이 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 ()에서 다른 동작을 설정하여 동일한 목록의 각 개별 버튼이 다른 작업을 수행하도록 할 수도 있습니다.

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