자바 스크립트 onchange 체크 박스 취소

Question

여기 내 첫 번째 질문은 정말 많이 배우기를 바랍니다. 저는 실제로 창업 초기의 기술적 인 사람은 아니지만 자신이 직접 일을하려하지 않는 이유 때문에 :-)

모듈 주문 시스템에 onchange 이벤트를 만들었습니다. 확인란을 클릭하면 선택한 모듈이 요약에 나타납니다. 이 작동합니다. 그러나 확인란 선택을 취소하면 요약에서 모듈이 사라지게됩니다. 그건 지금 작동하지 않습니다. 그 일을하기 위해 JS에서 무엇을 바꾸어야합니까?

체크 박스

<input type="checkbox" class="custom-control-input" 
    onchange="modulecontractsSelect(this, event)"> 

요약

<p id="module-contracts-summary"> </p> 
<p id="module-contracts-summary-price"> </p> 

자바 스크립트

function modulecontractsSelect() { 
    document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer" 
    document.getElementById("module-contracts-summary-price").innerHTML = "€5/mnd"; 
} 

감사에서 전진!

Answer 1

먼저 checkbox의 onchange 이벤트를 변경하여 itlsef (this) 만 매개 변수로 전달하십시오. 당신은 정말 매개 변수로 이벤트를 전달할 필요가 없습니다

<input type="checkbox" class="custom-control-input" onchange="modulecontractsSelect(this);"> 

을 그리고, 매개 변수 (아래 화살표로 내가 당신을 위해 그것을 강조)로 체크 박스 (this)를받을 modulecontractsSelect 기능을 변경합니다. 확인란이 checked 인 경우 innerHTML 값을 설정합니다.

이

        ▼ 
function modulecontractsSelect(checkbox) { 
    if (checkbox.checked) { 
     document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer" 
     document.getElementById("module-contracts-summary-price").innerHTML = "€5/mnd"; 
    } 
    else { 
     document.getElementById("module-contracts-summary").innerHTML = ""; 
     document.getElementById("module-contracts-summary-price").innerHTML = ""; 
    } 
} 

Answer 2

변경 같은 당신의 체크 박스 코드 :

function modulecontractsSelect(is_checked) { 
    if(is_checked) { 
     document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer" 
     document.getElementById("module-contracts-summary-price").innerHTML = "€5/mnd"; 
    } else { 
     document.getElementById("module-contracts-summary").innerHTML = ""; 
     document.getElementById("module-contracts-summary-price").innerHTML = ""; 
    } 
} 

: 다음

<input type="checkbox" class="custom-control-input" onchange="modulecontractsSelect(this.checked)"> 

이 같은에 modulecontractsSelect 기능을 변경이 checked 아닌 경우, 빈 문자열로 설정 이 코드는 테스트하지 않았지만 아이디어를 얻으십시오.