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

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

모듈 주문 시스템에 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"; 
}

감사에서 전진!

출처

2017-12-03 Jim Koeleman

귀하의 기능이 전혀 알지 못하기 때문에 체크 박스를 선택했는지 여부를 확인하고, 체크 박스에 대해 아무 것도 모르는 경우에도 설정하지 않습니다. btw. 나는 정말로 당신이'이벤트'를 필요로하지 않는다고 생각하며, 단지'this' 만 ... 피들 예제가 있습니다. https://jsfiddle.net/hej11u6g/ – nelek

먼저 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 = ""; 
    } 
}

출처

2017-12-03 12:49:14

당신의 도움에 많은 감사를드립니다! 그것은 작동합니다 :-) –

@JimKoeleman 도와 드리겠습니다, 행복한 코딩. –

-1

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

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 아닌 경우, 빈 문자열로 설정 이 코드는 테스트하지 않았지만 아이디어를 얻으십시오.

출처

2017-12-03 12:54:17

다운 투표 만이 세계가 얼마나 무책임한지를 보여줍니다. 설명해주십시오. 특히 내 대답은 내 대답과 일치하도록 수정되었다는 사실을 고려하십시오. –

나는 당신의 대답을 downvote하지 않았을뿐만 아니라, 나는 그것을 스스로 upvoting입니다. –

나는 투표를하지는 않았지만, ** 아마도 **이 코드를 테스트하지 않았으므로 ** 누군가 이미 이미 짧은 시간에 의견에 대답했기 때문에. –

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

답변

관련 문제