Zusätzliche Informationen basierend auf zwei (von drei) Checkboxen JavaScript

Question

Ich bin neu bei Javascript und ich versuche, zusätzliche Informationen nur zu zeigen, wenn alle 2 von 3 Checkboxen überprüft werden.

Hier ist mein Code bisher (Ich versuche, meinen Code in der Frage einzugeben, aber es funktioniert nicht, sorry. Ich habe es auch komplizierter als nötig gemacht, tut mir leid wieder). Ich habe meinen Code in die Demo gestellt.

<script> 
 
    
 
var checkboxes; 
 
window.addEvent('domready', function() { 
 
    var i, checkbox, textarea, div, textbox; 
 
    checkboxes = {}; 
 
// link the checkboxes and textarea ids here 
 
    checkboxes['checkbox_1'] = 'textarea_1'; 
 
    checkboxes['checkbox_2'] = 'textarea_2'; 
 
    checkboxes['checkbox_3'] = 'textarea_3'; 
 
    
 
    for (i in checkboxes) { 
 
    checkbox = $(i); 
 
    textbox = $(checkboxes[i]); 
 
    div = $(textbox.id + '_container_div'); 
 
    div.dissolve(); 
 
    showHide(i); 
 
    addEventToCheckbox(checkbox); 
 
    } 
 
    
 
    function addEventToCheckbox(checkbox) { 
 
    checkbox.addEvent('click', function(event) { 
 
     showHide(event.target.id); 
 
    }); 
 
    } 
 
}); 
 
    
 
function showHide(id) { 
 
    var checkbox, textarea, div; 
 
    if(typeof id == 'undefined') { 
 
    return; 
 
    } 
 
    checkbox = $(id); 
 
    textarea = checkboxes[id]; 
 
    div = $(textarea + '_container_div'); 
 
    textarea = $(textarea); 
 
    if(checkbox.checked) { 
 
    div.setStyle('display', 'block'); 
 
    //div.reveal(); 
 
    div.setStyle('display', 'block'); 
 
    textarea.disabled = false; 
 
    } else { 
 
    div.setStyle('display', 'none'); 
 
    //div.dissolve(); 
 
    textarea.value = ''; 
 
    textarea.disabled = true; 
 
    } 
 
} 
 
    
 
    
 
     <label for="choice-positive"> 
 
<script type="text/javascript"> 
 
function validate(f){ 
 
f = f.elements; 
 
for (var c = 0, i = f.length - 1; i > -1; --i) 
 
if (f[i].name && /^colors\[\d+\]$/.test(f[i].name) && f[i].checked) ++c; 
 
    
 
    
 
return c <= 1; 
 
}; 
 
    
 
</script> 
 
    
 
<label> 
 
<h4><div style="text-align: left"><font color="black"> 
 
<input type="checkbox" name="colors[2]" value="address" id="address">Full Address 
 
    
 
<br> 
 
<label> 
 
<input type="checkbox" name="colors[3]" value="phone" id="phone">Phone Number <br> 
 
<label> 
 
<input type="checkbox" name="colors[4]" value="account" id="account">Account Number <br> 
 
    
 
</form> 
 
    
 
<div class="reveal-if-active">

<h2><p style = "text-decoration:underline;"><font color="green">Receive the 2 following 
 
    
 
pieces of info:</h2></p> 
 
</style>

Answer 1

Leider war ich den Code, den Sie zur Verfügung gestellt verwenden, um genau nicht in der Lage, sondern versuchte, gerade genug, um zu ändern, es zum Laufen zu bringen.

Ich habe eine mögliche Lösung auf JSFiddle hochgeladen - Sie können im Wesentlichen Ereignislistener zu den Kontrollkästchen hinzufügen, die überprüfen, wenn geklickt wird, wie viele ausgewählt sind und zeigen/verbergen durch Entfernen/Hinzufügen einer Klasse z. additionalContactBox.classList.remove('reveal-if-active');