有條件的字段jQuery庫不與複選框一起工作

我正在使用一個小型jQuery庫jQuery-Visibly 一個jQuery插件，用於根據其他Form元素的值輕鬆顯示元素。有條件的字段jQuery庫不與複選框一起工作

項目頁面和文檔：http://www.danielrivers.com/visibly
項目的GitHub頁：

多個字段和值可以設置爲：https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js

是把它上面的一些其他圖書館的一些關鍵功能隱藏字段的規則，而不是像其他庫一樣只有一個字段到字段規則。例;爲了顯示字段3，我可以同時要求字段1和字段2都具有一定的值，以使字段3變爲可見。

正則表達式匹配 - 要求文本輸入文本值與正則表達式模式相匹配，以便顯示依賴條件字段的條件字段。

下面是我的演示，我想使用複選框來揭示一個隱藏的DIV。

在DIV ID #test我有一個條件規則visibly="foo:checked;foo3:checked"

設置這意味着領域#foo和#foo3都應該以揭示#test

但是它不工作進行檢查。該庫僅支持選擇和輸入字段而不支持複選框字段，但查看60線上的庫代碼（125行）https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js mI看到了:checked這使我認爲它得到支持，但我不是100％確定的嗎？

有人可以看看這個，看看複選框應該與我在做什麼？

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(); });

來源

2016-07-06 JasonDavis

可視化地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>

來源

2016-07-06 19:09:20 DavidDomain

如果你想用普通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(); 
    } 
    }); 
});

有些事情，你可以添加的是創造，說如果他們還有不會被點擊以不顯示它們。

來源

2016-07-06 19:19:06

有條件的字段jQuery庫不與複選框一起工作

回答

相關問題