条件フィールドjQueryライブラリがチェックボックスで機能しない

Question

小さなjQueryライブラリを使用していますjQuery-Visibly 他のフォーム要素の値に基づいて条件付きで簡単に要素を表示できるように設計されたjQueryプラグインです。

プロジェクト・ページおよびドキュメント：http://www.danielrivers.com/visibly
プロジェクトGitHubのページ：いくつかの他のライブラリの上にそれを置くhttps://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js

いくつかの重要な機能：

• 複数のフィールドとのように設定できる値他のライブラリと同じように単一のフィールドからフィールドへのルールだけではなく、隠しフィールドを明らかにするためのルールがあります。例。フィールド3を表示するために、フィールド3が視界に入るためには、フィールド1とフィールド2の両方に同時にある値を設定する必要があります。
• RegEx matching - テキスト入力には、それに依存する条件付きフィールドを表示するために正規表現パターンと一致するようにテキスト値を入力する必要があります。以下は

---

私は隠されたDIVを明らかにするために、チェックボックスを使用しようとしています私のデモです。 DIVのID #testで

私はこれはそれが動作していないが、フィールド#fooと#foo3は両方#test

を明らかにするためにチェックする必要があります意味visibly="foo:checked;foo3:checked"

で設定した条件付きのルールを持っています。ライブラリはチェックボックスフィールドではなく選択フィールドのみをサポートしていますが、ライブラリコード（125行）を参照してください。https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js on line 60 mI saw :checkedこれはサポートされていると思っていましたが、

誰かがこれを見て、私がやっていることと一緒にチェックボックスを使うべきかどうかを見極めることができますか？

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

目に見えplugi nは、ルールに追加した要素の属性valueをチェックして、値が条件を満たすかどうかを確認しているようです。したがって、checkbox要素で動作させたい場合は、value属性を変更する必要があります。

ここは例です。

場合

$('#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

あなたは、プレーンjQueryを使ってこれを行うにはしたいと思います：あなたが追加される場合があります

https://jsfiddle.net/rjmu8dus/

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

何かがあれば言う他を作成している彼らそれらを表示しないようにクリックされていません。