부트 스트랩은 <code>XMLHttpRequest</code>를 통해 라디오 입력 '확인'상태

좀 FormData을 보내려고 변경된 후 click 이벤트가 <label>가 <input type="radio" name="myName" id="myRadio" value="myValue"> 싸는에 감지되면 FormData가 인스턴스화되어 있는지 확인하는 방법 :부트 스트랩은 <code>XMLHttpRequest</code>를 통해 라디오 입력 '확인'상태

let labels = [].slice.call(document.getElementsByClassName("myLabels")); 
labels.forEach((label) => { 
    label.addEventListener("click",() => { 
     //toggle label class to change css, then... 
     let formData = new FormData(document.getElementById("myForm")); 
     //ajax stuff now...

을

The fiddle.

문제는 이미 부트 스트랩의 JS 전에 new FormData 인스턴스화 한 라벨을 클릭 한 후 #myRadio.checked 설정에 주변에 도착, 그래서 FormData는 WR을 가지고 있다는 것입니다 myName에 대한 ong 값 (현재 활성화 된 레이블의 입력이 아니라 이전에 활성화 된 레이블의 기본 라디오 입력의 값을가집니다). checked 상태가 부트 스트랩에서 레이블을 클릭하여 설정되어 있으므로 실제 DOM checked="true" 속성이 설정되어 있지 않습니다 - #myRadio.checked의 변화를 감지

는

상태의 일종을 기록하지 않고 수 없습니다.

타임 아웃을 도입하여이 문제를 해결하는 방법은 해킹처럼 보입니다. 내 FormData에서 올바른 데이터를 얻으려면 어떻게해야합니까?

참조 용으로는 here's the bootstrap docs의 라디오 스타일을 단추로 사용하십시오. 나는 언제 방법이 완료되었는지 알 수있는 내장 된 방법을 보지 못합니다.

출처

2016-10-30 Escher

[편집] (지금의 일을 쉽게하기 위해 jQuery를 사용하여) 업데이트 된 코드 및 the Fiddle you requested

$('label.btn').on('click', function() { 
 
    console.log($(this).children('input').val()); 
 
    // first uncheck them all 
 
    $('label.btn input').prop('checked', false) 
 
    // notice how classes are in the parent of the input 
 
    .parent().addClass('btn-secondary').removeClass('btn-primary').removeClass('active'); 
 
    // then check our child 
 
    $(this).children('input').prop('checked', true) 
 
    // notice how classes are in the parent of the input 
 
    .parent().addClass('btn-primary active').removeClass('btn-secondary'); 
 
    // then the FormData 
 
    let formData = new FormData(document.getElementById("myForm")); 
 
    for (let pair of formData.entries()) { 
 
    console.log(pair); 
 
    } 
 
}); 
 

 
/* 
 
$('label.btn').on('click', function() { 
 
    // click on the label is not the same as click on the input 
 
    console.log($('input[name="preview"]:checked').val() + " is checked"); 
 
}); 
 
*/

<head> 
 
<!-- 
 
Bootstrap dependencies: 
 
https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start 
 
--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
</head> 
 

 
<body> 
 

 
<form id="myForm"> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-sm btn-primary active"> 
 
    <input type="radio" name="preview" id="preview-enabled" value="Alice" autocomplete="off" checked>Alice 
 
    </label> 
 
    <label class="btn btn-sm btn-secondary"> 
 
    <input type="radio" name="preview" id="preview-disabled" value="Bob" autocomplete="off">Bob 
 
    </label> 
 
</div> 
 
</form> 
 

 
</body>

===

먼저 답변을 시도했다가 :

다음 예제에서 몇 가지 수정 사항을 찾을 수 있습니다. nev 비정상적인 동작 (이벤트가 끝날 때까지 변경되지 않습니다) 클릭 이벤트시의 확인 상태 때문입니다 장 소에 통보

let nodes = document.querySelectorAll('input[name="preview"]'); 
console.log(nodes); 

[].slice.call(nodes).forEach((node) => { 
    node.parentNode.addEventListener("click",() => { 
     console.log(node); 
     console.log(node.parentNode.className); 
     console.log(jQuery('input[name="preview"]:checked').val()) + ' is checked'; 
     if(node.checked === true){ 
      node.parentNode.className = node.parentNode.className.replace('btn-secondary', 'btn-primary'); 
     } else { 
      node.parentNode.className = node.parentNode.className.replace('btn-primary', 'btn-secondary'); 
     } 
     let formData = new FormData(document.getElementById("myForm")); 
     for (let pair of formData.entries()) { 
      console.log(pair); 
     } 
    }); //end eventListener function 
});

출처

2016-11-02 14:46:53 arhak

그래, 내가 말했듯이, 부트 스트랩 js는 이벤트 * 후에 * 입력을 변경합니다. 따라서 시간 초과없이 올바른 FormData를 얻으려면 어떻게해야할까요? – Escher

@ Escher 죄송합니다. 이제 아이디어를 얻었습니다. 내 업데이트 답변을 참조하십시오. 레이블을 클릭하면 실제로 레이블의 자식 인 라디오 (입력)를 클릭하는 것과 같지 않으므로 주소 지정에주의해야합니다 (새 코드는 jQuery를 사용하여 쉽게 작성합니다) – arhak

도 다음과 같이 업데이트되었습니다. 바이올린 링크 추가 – arhak

부트 스트랩은 <code>XMLHttpRequest</code>를 통해 라디오 입력 '확인'상태

답변

관련 문제