javascript jquery 라디오 버튼 클릭

javascript jquery 라디오 버튼 클릭

2개의 라디오 버튼과 jquery가 실행되고 있습니다.

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

이제 버튼을 클릭하여 기능을 실행할 수 있습니다.라디오 단추 중 하나를 클릭할 때 라디오 단추가 작동하도록 만드는 방법은 무엇입니까?

사용할 수 있습니다..change당신이 원하는 것을 위하여

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

jQuery 1.3 기준

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

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

ID가 = radioButtonContainerId인 용기에 라디오가 들어 있는 경우에도 클릭하여 사용할 수 있으며 선택된 라디오를 확인하고 그에 따라 다음 기능을 실행할 수 있습니다.

$('#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
    });

언급URL : https://stackoverflow.com/questions/5142300/javascript-jquery-radio-button-click