Javascript для показа содержимого, если флажок установлен

-3

В этом скрипте я создал скрипт, который должен показать форму, если флажок установлен, но я не могу заставить ее работать. В нем говорится, что функция является неизвестной переменной.Javascript для показа содержимого, если флажок установлен

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>

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

источник

2016-12-08 Martin Ouředník

Убедитесь, что toggleCheckbox под оберточной голову так, что ее глобально и использовать подъезд ID = «LicenseCustomer» вместо класса см https://jsfiddle.net/00gckvxw/7/ –

@VinodLouis почему вы удалите ответ? Правильно –

у вас есть класс spans, установленный LicenseCustomer, а не id. И пытаюсь getElementById. измените класс на id. [Здесь] (https: // jsfiddle.net/00gckvxw/15 /) – Manish

Я думаю, что вы пропустили, чтобы включить файл Javascript в вашем в 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. Я бы не рекомендовал использовать <tr> внутри <div> или <span>, лучше использовать id по адресу <tr> напрямую или использовать <tbody>, если у вас несколько линий.

источник

2016-12-08 12:19:02

исправленная версия:

http://pastebin.com/RrMD78AG

Несколько ошибок я хочу вам сказать: - первый вы используете класс = «LicenseCustomer» и вы используете селектор document.getElementById (он не может получить элемент с классом имя).

второй вы используете onclick = "toggleCheckbox();", когда вы вызываете функцию, вам не нужно использовать «точку с запятой» в конце имени функции (ее неправильный синтаксис) - onclick = "toggleCheckbox() "(точка с запятой).

источник

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>

Ниже Javascript

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

Демо: https://jsbin.com/bowicivupa/edit?html,js,console,output

источник

2016-12-08 12:34:47 jignesh

Попробуйте что-то вроде этого.

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:39:55

Javascript для показа содержимого, если флажок установлен

ответ

Смежные вопросы