Bedingtes Feld jQuery-Bibliothek funktioniert nicht mit Kontrollkästchen

Question

Ich benutze eine kleine jQuery-Bibliothek jQuery-Sichtbar Ein jQuery-Plugin entwickelt, um einfach Bedingte Elemente basierend auf Werten anderer Formelemente anzuzeigen.

Projektseite und Dokumentation: http://www.danielrivers.com/visibly
Projekt GitHub Seite: https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js

Einige der wichtigsten Funktionen, die es vor einigen anderen Bibliotheken setzen:

• Mehrere Felder und Werte wie eingestellt werden können eine Regel zum Aufdecken eines versteckten Feldes statt nur eines einzelnen Felds zur Feldregel, wie es andere Bibliotheken tun. Beispiel; Um Feld 3 anzuzeigen, kann ich verlangen, dass sowohl Feld 1 als auch Feld 2 einen bestimmten Wert in beiden gleichzeitig haben, damit das Feld 3 sichtbar wird.
• RegEx übereinstimmend - erfordert einen Texteingabe-Textwert, der dem Regex-Muster entspricht, damit ein bedingtes Feld, das darauf angewiesen ist, angezeigt wird.

---

Unten ist meine Demo, wo ich Checkbox zu verwenden versuchen eine versteckte DIV zu offenbaren.

In DIV ID #test Ich habe eine bedingte Regel-Set mit visibly="foo:checked;foo3:checked"

Das bedeutet Feld #foo und #foo3 sowohl um #test

offenbaren sollte geprüft werden jedoch es nicht funktioniert. Es ist möglich, dass die Bibliothek nur Auswahl- und Eingabefelder unterstützt und keine Checkbox-Felder, sondern den Bibliothekscode (125 Zeilen) https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js auf Zeile 60 sah ich :checked, was mich glauben ließ, dass es unterstützt wird, aber ich bin mir nicht 100% sicher?

Könnte jemand sich das ansehen, um zu sehen, ob Checkboxen mit dem funktionieren sollten, was ich mache?

DEMO:https://jsfiddle.net/955us4ge/

HTML

<label for="foo"> 
    <input id="foo" name="foo" type="checkbox"> Foo 
</label> 

<label for="foo2"> 
    <input id="foo2" name="foo2" type="checkbox"> Foo2 
</label> 

<label for="foo3"> 
    <input id="foo3" name="foo3" type="checkbox"> Foo3 
</label> 

<div id="test" class="conditional" visibly="foo:checked;foo3:checked"> 
    this should be hidden until checkbox #foo and #foo3 are both checked 
</div> 

JS

$(document).ready(function() { 
    $('#test').Visibly(); 
}); 

---

Answer 1

Die Sichtlich Plugi n scheint das Attribut value der Elemente zu überprüfen, die Sie den Regeln hinzugefügt haben, und überprüft, ob der Wert die Bedingung erfüllt. Wenn Sie möchten, dass es mit checkbox Elementen funktioniert, müssen Sie das Attribut value auf ihnen ändern.

Hier ist ein Beispiel.

$('#test').Visibly(); 
 

 
$("input").on("click", function() { 
 
    if($(this).prop("checked")) { 
 
    $(this).val("checked"); 
 
    } else { 
 
    $(this).val(""); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://rawgit.com/DanielRivers/jQuery-Visibly/master/js/jquery-visibly.js"></script> 
 

 

 
<label for="foo"> 
 
    <input id="foo" name="foo" type="checkbox" value=""> Foo 
 
</label> 
 

 
<label for="foo2"> 
 
    <input id="foo2" name="foo2" type="checkbox" value=""> Foo2 
 
</label> 
 

 
<label for="foo3"> 
 
    <input id="foo3" name="foo3" type="checkbox" value=""> Foo3 
 
</label> 
 

 

 

 
<div id="test" class="conditional" visibly="foo:checked;foo3:checked"> 
 
    This should be hidden until checkbox #foo and #foo3 are both checked 
 
</div>

Answer 2

Falls Sie möchten diese mit einfachen jQuery tun:

https://jsfiddle.net/rjmu8dus/

$(document).ready(function() { 
    $("input[type=checkbox]").on('change',function(){ 
    if($("#foo").prop('checked') == true && $("#foo3").prop('checked') == true) { 
     $("#test").show(); 
    } 
    }); 
}); 

Etwas, das Sie ist ein anderes schaffen könnte hinzufügen, dass sie sagt, wenn werden nicht angeklickt, um sie nicht anzuzeigen.