onClick()과 onChange() (라디오 버튼)의 차이점

Question

<input type="radio" name="group" value="book_folder" onchange="makeRadioButtons()">Create New Book</input> 

<input type="radio" name="group" value="book_chapter" onchange="makeCheckBoxes()">Create New Chapter</input> 

위의 코드를 사용하고 있는데 두 번째 라디오 버튼을 클릭했을 때 두 개의 이벤트가 발생합니다. 하나는 체크되지 않은 버튼에서, 논리적으로 말하면, 두 단추는 상태가 변경 되었기 때문에 onclick() 이벤트가 아닌 onchange() 이벤트를 바인드했습니다. 그러나 그것은 막 체크 된 버튼으로부터 하나의 이벤트를 얻는 것처럼 보입니다. 이 html에서 원하는 동작입니까? 선택을 취소 한 경우 어떻게 버튼에서 이벤트를 가져올 수 있습니까?

Answer 1

사용이 원하는 동작을 얻을 수 있습니다 : -

var ele = document.getElementsByName('group'); 
var i = ele.length; 
for (var j = 0; j < i; j++) { 
    if (ele[j].checked) { //index has to be j. 
     alert('radio '+j+' checked'); 
    } 
    else { 
     alert('radio '+j+' unchecked'); 
    } 
} 

는 도움이되기를 바랍니다.

Answer 2

두 확인란 모두 하나의 HTML 요소를 구성하며 이름은 group입니다. 그래서 여기에 하나의 이벤트 만 있습니다.

Here은 각각의 개별 확인란을 반복하고 값에 액세스하는 방법을 보여주는 데모 예제입니다.

Answer 3

변수를 사용하여 현재 선택된 라디오 버튼의 값을 저장할 수 있으므로 이벤트가 발생하면 이전의 체크 된 버튼 값이 저장되므로 한 번만 라디오 버튼을 클릭하면됩니다. 확인해 봐. 그런 다음 업데이트 된 라디오 버튼 확인 값을 저장할 수 있습니다.

Answer 4

브라우저에는 하나의 이름을 가진 N 개의 라디오 버튼이 하나의 컨트롤입니다. 게시 데이터 (또는 데이터 가져 오기)를 서버로 다시 보내려는 경우 매개 변수의 키로 name 속성을 사용하고 해당 매개 변수의 값으로 해당 이름 속성이있는 현재 선택된 라디오 버튼의 값을 사용하기 만합니다. 매개 변수를 보냈습니다. 그래서 라디오를 그룹으로 묶을 속성을 지정해야합니다. 따라서 onchange는 10 개의 라디오에 대해 논리적으로 10 번 발생해서는 안됩니다. 브라우저 시점에서 group 컨트롤의 값이 book_folder에서 book_chapter으로 변경되었습니다. 그게 다야.

Answer 5

$(document).ready(function(){ 
     $("input[name='group']").on(
     { 
      'change' : function() 
        { 
         $.each($("input[name='group']"), 
           function() 
           { 
           var ObjectId, ObjectValue; 

           if($(this).is(':checked')) 
           { 
            /*Checked radio button OBJECT */ 

            console.log(this);      /* Jquery "this" Object */ 
            ObjectId = $(this).attr('id');  /* Id of above Jquery object */ 
            ObjectValue = $(this).val();   /* Value of above Jquery object */ 
           } 
            else 
           { 
            /* UnChecked radio button OBJECT */ 
            console.log(this);      /* Jquery "this" Object */ 
            ObjectId = $(this).attr('id');  /* Id of above Jquery object */ 
            ObjectValue = $(this).val();   /* Value of above Jquery object */ 
           } 
           } 
          ); 
        } 
     } 
    ); 
    });