Javascript, um Inhalte anzuzeigen, wenn das Kontrollkästchen aktiviert ist

-3

In dieser Fiddle habe ich Skript erstellt, das das Formular anzeigen sollte, wenn das Kontrollkästchen aktiviert ist, aber ich kann es nicht funktionieren. Es besagt, dass die Funktion eine unbekannte Variable ist.Javascript, um Inhalte anzuzeigen, wenn das Kontrollkästchen aktiviert ist

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>

und Javascript

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/

Quelle

2016-12-08 Martin Ouředník

Stellen Sie sicher, Ihre toggleCheckbox unter Wickelkopf ist, so dass seine global zugänglich und verwenden id = „LicenseCustomer“ statt Klasse sehen https://jsfiddle.net/00gckvxw/7/ –

@VinodLouis warum hast du löschen Ihre Antworten? Es war korrekt –

Sie haben die span-Klasse auf LicenseCustomer und nicht ID festgelegt. Und versuche, ElementById zu bekommen. Ändere die Klasse in ID. [Hier] (https: // jsfiddle.net/00gckvxw/15 /) – Manish

Ich glaube, Sie die Javascript-Datei enthalten verpasste in Ihrem in html, weil es nicht in der Lage ist, die Funktion zu finden toggleCheckbox beim Klicken auf das Kontrollkästchen.

auch

auch umspannen Element Klasse = 'LicenseCustomer', diese ID ändern = 'LicenseCustomer' try einschließlich Inline-Skript

<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>

Quelle

2016-12-08 12:12:22

Es besteht kein Grund zu der Annahme, dass dies das Problem ist oder dass das OP den JS nicht berücksichtigt hat. –

Hier ist es die korrigierte Version https://jsfiddle.net/00gckvxw/24/.

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

Es hat damit zu tun, wenn die Ereignisse angehängt sind. Überprüfen Sie dies: testing a function in jsfiddle.

Ich änderte auch die span zu div und class Attribut zu id. Ich würde nicht empfehlen <tr> in einem <div> oder <span>, besser verwenden Sie id auf <tr> direkt oder verwenden Sie <tbody>, wenn Sie mehrere Zeilen haben.

Quelle

2016-12-08 12:19:02

korrigierte Version:

http://pastebin.com/RrMD78AG

Ein paar Fehler, die ich möchte Ihnen sagen: - zuerst Sie verwenden class = "LicenseCustomer" und Sie sind mit document.getElementById Selektor (es kann nicht mit Klasse bekommen Element Name).

Zweitens verwenden Sie onclick = "toggleCheckbox();", wenn Sie Funktion aufrufen, müssen Sie nicht 'Semikolon' am Ende eines Funktionsnamens verwenden (es ist eine falsche Syntax) - onclick = "toggleCheckbox() "(kein Semikolon).

Quelle

2016-12-08 12:33:31 Ishu

es funktioniert auch mit einem Semikolon - Sie können tatsächlich mehr Aussagen haben –

danke für die Korrektur – 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>

Unten finden Sie die Javascript

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

Demo: https://jsbin.com/bowicivupa/edit?html,js,console,output

Quelle

2016-12-08 12:34:47 jignesh

Versuchen Sie, so etwas wie dieses.

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"); 
    } 
}

Quelle

2016-12-08 12:39:55

Javascript, um Inhalte anzuzeigen, wenn das Kontrollkästchen aktiviert ist

Antwort

Verwandte Themen