javascript checkbox basic

나는 상자를 검사 한 결과로 경고를 받으려고합니다. 나는 체크 - 이벤트를 고립시키는 것처럼 보이지 않는다. 처음에는 check 속성을 false로 설정하려고 시도하지만 페이지 이벤트를로드 할 때 발생합니다.javascript checkbox basic

위로 올려 보면 jquery와 그 모든 것들이 있지만 JavaScript에 대한 공식적인 교육을 위해서는 자바 스크립트에 충실해야하며 이걸 먼저 가져와야합니다 (jquery는 내 다음 코스가 될 것입니다). 이 BTW 위키 버 시티에서 자바 스크립트 도전

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
    <title>JavaScript Challenges</title> 
    <script type="text/javascript"> 
    window.onload = function(){ 
    checkbox = document.getElementById("subscribe"); 
checkbox.checked = false; 


if (checkbox.checked = true){ 
    alert("checked works"); 
    } 

} 

    </script> 
    </head> 
    <body> 
    <form action=""> 
     <fieldset> 

     <legend>Email subscriptions</legend> 

     <p id="subscribepara"> 
      <label> 
      <input type="checkbox" name="subscribe" id="subscribe"> 
      Yes! I would like to receive the occasional newsletter via email. 
      </label> 
     </p> 

     <p id="emailpara"> 
      <label> 
      Email Address: 
      <input type="text" name="email" id="email"> 
      </label> 
     </p> 

     </fieldset> 
    </form> 
    </body> 
</html>

여기에 코드입니다. 첫 번째 도전의 두 번째 부분. 첫 부분은 필요한 부분 style.display = 'none'으로 전자 메일 요소를 숨기면 잘 작동합니다. 비교 연산자가 파손되어 있기 때문에 발사처럼

출처

2011-02-08 Immers

같습니다 :

if (checkbox.checked = true)

당신이 가지고있는 버전은 기본적으로 true로 확인 상태를 설정하는 것입니다

if (checkbox.checked == true)

해야한다. 이 작업은 성공적으로 수행되므로 자체적으로 true로 처리됩니다 (조건부로 들어가고 경고가 표시됨).

또한이 코드는 확인란을 수동으로 선택/선택 취소 할 때 실행되지 않습니다. 이것은 페이지가로드 될 때 한 번만 실행됩니다. 클릭 이벤트에 바인딩하는 한 가지 방법은 체크 박스의 경우 specify a function call in the markup입니다.

마크 업에서는하지 말고 코드를 분리하고 외부 이벤트에 바인딩하는 것이 좋습니다. 하지만 jQuery에 들어갈 때 그 내용을 익힐 수 있습니다. 기본으로 시작하는 것이 좋습니다. 당신이 체크 박스를 확인 후 트리거 이벤트를 원하는 경우

출처

2011-02-08 12:21:37 David

'if (checkbox.checked)'도 괜찮습니까? – erickb

@erickb :해야합니다. 자바 스크립트는 정적 유형의 배경 (예 : 나 같은)에서 오는 누군가에게 원시 유형에 조금 이상하지만 작동해야합니다. – David

, 당신은 window.onload에 바인딩하지 말아야하지만, 체크 박스의 onchange 이벤트는 다음 onchange 이벤트가 작동하지 않습니다

는

<script> 
    var checkbox = document.getElementById('subscribe'); 
    checkbox.onchange = function() { 
     if (checkbox.checked = true){ 
      alert("checked works"); 
     } 
    } 
</script>

을 유의하시기 바랍니다 다른 브라우저와 마찬가지로 Internet Explorer에서도 마찬가지입니다. 이것은 다른 주제입니다. 자세한 내용은 this question을 참조하십시오.

위의 기능은 실제 입력 요소 아래에 정의해야합니다. 이 샘플을 <head>에 포함 시키면 id가 subscribe 인 요소의 존재를 아직 알지 못하고 JavaScript가 실패합니다. 더 나은 대안은 DOM로드 후 이벤트 핸들러를 바인딩하는 것입니다., 그러나 간결함을 위해 자세한 정보가 필요하면 SO 또는 Google에서이 주제를 검색하는 것이 좋습니다.

출처

2011-02-08 12:22:33

당신의 접근 방식은 약간 떨어져 있습니다 - 중요하게도, 실제로 이벤트를 잡기/처리하지는 않습니다. 현재 페이지에이로드되면 확인란을 선택한 상태에서 경고를 시작할 수 있습니다. 요구 사항에 대한 나의 이해는 체크 박스가 으로 바뀌었을 때 경고창을 띄운 것입니다.을 체크합니다.

(데이빗이 지적했듯이 실제로 수표를 만들 때 실수로 틱크 박스를 확인하고 있습니다.)

대신 체크 박스의 onchange 이벤트에 대한 수신기를 등록하면 체크 박스가 변경 될 때마다 일부 코드가 실행됩니다. 을에 대해 배우고 싶은 것처럼 들리므로 정확한 코드를 제공하는 대신 그 코드를 남겨 두겠습니다. 이을 살펴보고 무엇과 방법에 대해 더 자세히 읽고 싶다면 (이 특별한 경우에 필요한 것보다 훨씬 더 복잡합니다).

출처

2011-02-08 12:24:11

링크 주셔서 감사합니다! 이 기사는 매우 평신도에게 친숙하지만 매우 혼란 스러웠습니다. 내가 머리를 좀 더 들어야 겠어. – Immers

확인란을 선택하는 동작으로 함수를 호출하려면 확인란에 이벤트 수신기를 추가해야합니다. 그 방법은 다음과 같습니다

// you have to do it inside the window.onload function so you know the DOM is available 
window.onload = function(){ 
var checkbox = document.getElementById("subscribe"); 
checkbox.onchange = function(){ 
    if(checkbox.checked == true){ 
    alert('checked!'); 
    } 
}; 
};

은 "onchange를"속성이 체크 박스마다 호출되는 함수로 설정이 체크되지 않은 VICA 반대로 검사에서 변화 상태입니다. 이 함수 내에서 checked 값을 확인하고 적절한 경우 경고를 시작합니다.

희망 하시겠습니까?

출처

2011-02-08 12:24:35 Shakakai

예, 도움이되었습니다. 감사! – Immers

comparison을 확인하십시오. checkbox.checked = true는 과제입니다. Research onClick event

본질적으로 숙제이기 때문에 작업 코드를 게시하지 않습니다. 너는 가깝고, 더 읽고 나면 너는 그것을 얻을 것이다.

출처

2011-02-08 12:27:24 Chuck

함수를 사용하여 onclick 이벤트를 통해 함수를 트리거 할 수 있습니다. 이렇게하면 다른 확인란에서도 다시 사용할 수 있습니다.

# js 
function alert_on_checked(elementId) { 
    var checkbox = document.getElementById(elementId); 
    if(checkbox.checked) { 
    alert('checked works!'); 
    } 
} 

# html 
... 
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" > 
...

출처

2011-02-08 12:36:47 erickb

흥미 롭습니다. HTML 요소에 이벤트 핸들러를 두는 것이 거래가 무엇인지 궁금합니다. 내 코스는 요소를 스크립트에 삽입하는 것과 같은 것들이 침략 적으로 비명을 지르는 것을 멈출 수 없습니다. – Immers

javascript checkbox basic

답변

관련 문제