Javascript Checkbox klicken nicht angezeigt Geschwister geprüft

Ich versuche, unten in Code 2 Dinge zu tun, nach dem Klicken Eltern-Check-Box:Javascript Checkbox klicken nicht angezeigt Geschwister geprüft

Versteckte Liste der kinderCHECKBOXEN
sie standardmäßig aktiviert Stellen

Aber irgendwo fehlt etwas. Hilfe sehr geschätzt. Code:

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script src="assets/js/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    function showMe (box) { 
    var chboxs = document.querySelectorAll('[name="c1"], [name="c2"], [name="c3"], [name="c4"], [name="c5"], [name="c6"], [name="c7"], [name="c8"], [name="c9"], [name="c10"], [name="c11"], [name="c12"], [name="c13"], [name="c14"], [name="c15"], [name="c16"]'); 
    var vis = "none"; 
    for(var i=0;i<chboxs.length;i++) { 
    if(chboxs[i].checked){ 

    vis = "block"; 
    break; // breaks or terminates the LOOP 

    } 

    } 

    document.getElementById(box).style.display = vis; 
    document.getElementById(box).siblings('ul') 
    .find("input[type='checkbox']") 
    .prop('checked', this.checked); 

    } 

    </script>  
    </head> 
    <body> 

    <table> 
    <td width="200px"> 
    <input type="checkbox" name="c8" onclick="showMe('central-europe')">Central Europe 
    </td> 
    </table> 


    <table> 
    <td width="200px" style="vertical-align:top"> 
    <ul id="central-europe" style="list-style:none; padding-left: 0px; display:none;"> 

    <li><input type="checkbox" name="ceurope[]" value="EE" size="40" class="chk_box" />Estonia</li> 
    <li><input type="checkbox" name="ceurope[]" value="LV" size="40" class="chk_box" />Latvia</li> 
    <li><input type="checkbox" name="ceurope[]" value="LT" size="40" class="chk_box" />Lithuania</li> 
    <li><input type="checkbox" name="ceurope[]" value="CZ" size="40" class="chk_box" />Czech Republic</li> 
    <li><input type="checkbox" name="ceurope[]" value="HU" size="40" class="chk_box" />Hungary</li> 
    <li><input type="checkbox" name="ceurope[]" value="RO" size="40" class="chk_box" />Romania</li> 
    <li><input type="checkbox" name="ceurope[]" value="SI" size="40" class="chk_box" />Slovenia</li> 
    <li><input type="checkbox" name="ceurope[]" value="XK" size="40" class="chk_box" />Kosovo</li> 
    <li><input type="checkbox" name="ceurope[]" value="CY" size="40" class="chk_box" />Cyprus</li> 


    </ul> 
    </td> 
    </table> 

    </body> 
    </html>

Quelle

2016-05-26 George Matthews

'document.getElementById (box) .siblings ('ul')' wird zu einem Fehler führen – Satpal

Es gibt keine siblings Methode von Node, Verwenden jQuery Selektor. Beachten Sie auch, dass keine .siblings Methode verwendet werden muss, da $('#'+box)ul Element zurückgibt.

Pass this Kontext in inline-function zuzugreifen checked Zustand

function showMe(box, elem) { 
 
    var chboxs = document.querySelectorAll('[name="c1"], [name="c2"], [name="c3"], [name="c4"], [name="c5"], [name="c6"], [name="c7"], [name="c8"], [name="c9"], [name="c10"], [name="c11"], [name="c12"], [name="c13"], [name="c14"], [name="c15"], [name="c16"]'); 
 
    var vis = "none"; 
 
    for (var i = 0; i < chboxs.length; i++) { 
 
    if (chboxs[i].checked) { 
 
     vis = "block"; 
 
     break; 
 
    } 
 
    } 
 
    document.getElementById(box).style.display = vis; 
 
    $('#' + box).find("input[type='checkbox']") 
 
    .prop('checked', elem.checked); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
    <td width="200px"> 
 
    <input type="checkbox" name="c8" onclick="showMe('central-europe',this)">Central Europe 
 
    </td> 
 
</table> 
 

 
<table> 
 
    <td width="200px" style="vertical-align:top"> 
 
    <ul id="central-europe" style="list-style:none; padding-left: 0px; display:none;"> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="EE" size="40" class="chk_box" />Estonia</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="LV" size="40" class="chk_box" />Latvia</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="LT" size="40" class="chk_box" />Lithuania</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="CZ" size="40" class="chk_box" />Czech Republic</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="HU" size="40" class="chk_box" />Hungary</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="RO" size="40" class="chk_box" />Romania</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="SI" size="40" class="chk_box" />Slovenia</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="XK" size="40" class="chk_box" />Kosovo</li> 
 
     <li> 
 
     <input type="checkbox" name="ceurope[]" value="CY" size="40" class="chk_box" />Cyprus</li> 
 
    </ul> 
 
    </td> 
 
</table>

Quelle

2016-05-26 10:40:34 Rayon

Awesome..Works wie CHARME. Danke TONS .. :) –

@ GeorgeMatthews, glücklich zu helfen! Bitte [akzeptieren und up-stimme] (http://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow) die beste Lösung, die den Zweck gelöst hat :) __Happy Kodierung! __ – Rayon

Javascript Checkbox klicken nicht angezeigt Geschwister geprüft

Antwort

Verwandte Themen