div에 동적으로 추가 할 때 확인란 선택을 방지하는 방법은 무엇입니까?

Question

저는이 문제에 어려움을 겪고 있습니다.

버튼을 클릭하여 div에 동적으로 확인란을 추가하고 싶습니다. div에 2 개의 체크 박스가 이미 있다고 가정 해 봅시다. 2. 버튼을 클릭하면 체크 박스가 3이됩니다.하지만 3이 체크됩니다. 내가 원하는 것은 체크 박스를 추가 할 때, 다른 체크 박스는 체크 된 상태가 이전과 동일하게 유지된다는 것입니다.

HTML :

<div id="chkbox_container"> 
    <input type="checkbox" checked>Check<br /> 
</div> 
<input type="button" value="Add CheckBox" onClick="addCheckBox();"> 

자바 스크립트 : 귀하의 답변에 미리

function addCheckBox() { 
    txt = "<input type=\"checkbox\" checked>Check<br />"; 
    document.getElementById('chkbox_container').innerHTML += txt; 
} 

감사

여기 내 코드 (http://jsfiddle.net/gr2o47wt/4/)입니다! :)

Answer 1

당신은 오히려 innerHTML를 조작보다 insertAdjacentHTML()를 사용할 수 있습니다

<input type="button" value="Add CheckBox" 
onClick="document.getElementById('chkbox_container').insertAdjacentHTML('beforeend','<input type=\'checkbox\' checked=\'checked\' />Check<br />');"> 

JS Fiddle demo.

문제는 원래 HTML (innerHTML에 의해 반환 됨)이 페이지의 소스에서 온 것이지 DOM이 아니라는 것입니다. 따라서 원래 원래 있던 체크 박스의 체크/체크되지 않은 특성이 복원되었습니다.

insertAdjacentHTML()은 지정된 위치 (이 경우 'beforeend')에 HTML 문자열을 추가하기 만하면됩니다.

가능한 한 HTML 요소 외부에서 이벤트 처리를 유지하는 것이 좋습니다. JavaScript 자체에서 이러한 이벤트 핸들러를 바인딩 할 수 있습니다. 이것은 다소 쉽게 유지 보수를 위해 만들고, 다음과 같은 코드로 이어질 것 :

// note that I gave the button an 'id' for simplicity: 
var button = document.getElementById('addCheckboxes'); 

button.addEventListener('click', function() { 
    document.getElementById('chkbox_container').insertAdjacentHTML('beforeend', '<input type=\'checkbox\' checked=\'checked\' />Check<br />'); 
}); 

JS Fiddle demo.

마지막으로, HTML의 일부 (또는 적어도 잘못된), <input />은 무효 요소, 그것은 더 후손을 가질 수 유효하지 않습니다; 따라서 닫는 태그가 없습니다 (단지 : <input>) 또는 자체 닫음 (<input />)입니다.

또한 체크 박스 옆의 텍스트는 약간의 오해의 소지가 있습니다. 일반적으로 HTML 양식의 경우 <input /> 옆의 텍스트에 해당 입력이 집중됩니다. 즉 예를 들어, 제어와 텍스트를 연결하는 <label> 소자를 이용함으로써 달성 같습니다

<label><input type="checkbox" /> click</label> 

JS Fiddle demo.

또는 :

<input type="checkbox" id="inputElementID" /> 
<label for="inputElementID">click</label> 

그러나 후자의 형태는 (이 질문의 범위를 넘어 조금) id의의 동적 생성을 필요로한다.

참고 :

• insertAdjacentHTML().