체크 박스가 체크 된 경우 콘텐츠를 표시하는 자바 스크립트

-3

이 피들에서는 확인란을 선택하면 양식을 표시해야하지만 작동하지는 못하는 스크립트를 만들었습니다. 함수가 알려지지 않은 변수라고합니다.체크 박스가 체크 된 경우 콘텐츠를 표시하는 자바 스크립트

HTML을

<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'> 
<label> 
    <b>Buying for someone else.</b> 
</label> 
<span id="LicenseCustomer" style="display:none">/*some form*/</span>

그리고 자바 스크립트

function toggleCheckbox() { 
    var lfckv = document.getElementById("_My.notFinal").checked; 
    if (lfckv) { 
    document.getElementById("LicenseCustomer").style.display = "block"; 
    } else { 
    document.getElementById("LicenseCustomer").style.display = "none"; 
    } 
}

https://jsfiddle.net/00gckvxw/1/

출처

2016-12-08 Martin Ouředník

삭제 않은 이유 대신 클래스는 전 세계적으로 accesible 및 사용 ID = "LicenseCustomer는"https://jsfiddle.net/00gckvxw/7/ –

@VinodLouis를 볼 수 있도록 toggleCheckbox 랩 헤드 아래에 있는지 확인하여 대답? –

의 스팬 클래스는 id가 아니라 LicenseCustomer로 설정되어 있습니다. 그리고 getElementById를 시도합니다. 클래스를 id로 변경하십시오. [여기] (https : // jsfiddle. – Manish

나는 당신이 자바 스크립트 파일을 포함하도록 놓쳤다 생각하여 HTML에서,이 기능을 찾을 수 없기 때문에 체크 박스를 클릭하면 toggleCheckbox이 표시됩니다. 또한

은 또한 요소는 클래스 =이있다 걸쳐 'LicenseCustomer'아이디로 변경 = 인라인 스크립트를 포함하여 'LicenseCustomer' 시도는 여기에

<script> 
function toggleCheckbox() { 
    var lfckv = document.getElementById("_My.notFinal").checked; 
    console.log(lfckv); 
    if (lfckv) { 

    document.getElementById("LicenseCustomer").style.display = "block"; 
    } else { 
    document.getElementById("LicenseCustomer").style.display = "none"; 
    } 
} 
</script> 
<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'> 
<label><b>Buying for someone else.</b> 
    <label>&nbsp; 

    <span id="LicenseCustomer" style="display:none"> 

<tr valign=middle> 
    <td class="bodycopy" align=right width=160><b>License Contact:</b>&nbsp;</td> 
    <td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td> 
    </tr> 
    <tr valign=middle> 
    <td class="bodycopy" align=right><b> License E-mail Address:</b>&nbsp;</td> 
    <td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td> 
    </tr> 
    <tr valign=middle> 
    <td class="bodycopy" align=right><b> License Phone:</b>&nbsp;</td> 
    <td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td> 
    </tr> 

</span>

출처

2016-12-08 12:12:22

이것이 문제이거나 OP가 JS를 포함하지 않았다고 믿을만한 이유가 없습니다. –

이 수정 된 버전 https://jsfiddle.net/00gckvxw/24/입니다.

document.getElementById("_My.notFinal").onclick = toggleCheckbox;

이벤트가 첨부 될 때 관계가 있습니다. 이것을 확인하십시오 : testing a function in jsfiddle.

또한 span을 div 및 class의 속성을 id으로 변경했습니다. <div> 또는 <span> 안에 <tr>을 사용하지 말고 id을 <tr>에 직접 쓰거나을 여러 줄 사용하는 것이 좋습니다.

출처

2016-12-08 12:19:02

수정 된 버전 : 나는 당신을 말하고 싶어

http://pastebin.com/RrMD78AG

거의 실수 : - 첫째 당신은 클래스 = "LicenseCustomer"를 사용하고, 그것은 클래스 요소를 얻을 수 없다 (document.getElementById를 선택기를 사용하는 이름).

초 onclick = "toggleCheckbox();"함수를 호출 할 때 함수 이름 끝에 '세미콜론'을 사용할 필요가 없습니다 (구문이 올바르지 않습니다) - onclick = "toggleCheckbox() "(세미콜론 없음). https://jsbin.com/bowicivupa/edit?html,js,console,output

출처

2016-12-08 12:33:31 Ishu

너무 세미콜론과 함께 작동 - 실제로 거기에 더 많은 진술을 할 수 –

정정 주셔서 감사합니다 – Ishu

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>JS Bin</title> 
    </head> 
    <body> 
    <input type="checkbox" id="_My.notFinal" class='checkbox'> 
    <label><b>Buying for someone else.</b> 
     </label>&nbsp; 

     <span class="LicenseCustomer" style="display:none"> 

    <tr valign=middle> 
     <td class="bodycopy" align=right width=160><b>License Contact:</b>&nbsp;</td> 
     <td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td> 
     </tr> 
     <tr valign=middle> 
     <td class="bodycopy" align=right><b> License E-mail Address:</b>&nbsp;</td> 
     <td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td> 
     </tr> 
     <tr valign=middle> 
     <td class="bodycopy" align=right><b> License Phone:</b>&nbsp;</td> 
     <td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td> 
     </tr> 

    </span> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 

    </body> 
    </html>

다음은 자바 스크립트

$(document).ready(function() 
    { 
     $(".checkbox").change(function() { 
     if(this.checked) 
     { 
      $(".LicenseCustomer").css('display','block'); 
     } 
     else 
     { 
       $(".LicenseCustomer").css('display','none'); 
     } 
    }) 
    });

데모입니다.

function toggleCheckbox(){ 
    var lfckv = document.getElementById('myCheck').checked; 
    if(lfckv){ 
     document.getElementsByTagName("span")[0].setAttribute("style", "display:none"); 
    } else { 
     document.getElementsByTagName("span")[0].setAttribute("style", "display:block"); 
    } 
}

출처

2016-12-08 12:34:47 jignesh

이런 식으로 뭔가를 시도 :

출처

2016-12-08 12:39:55

체크 박스가 체크 된 경우 콘텐츠를 표시하는 자바 스크립트

답변

관련 문제