Question

我正在使用一个小的jQuery库 jQuery-Visibly 一个jQuery插件，旨在轻松地根据其他Form元素的值显示元素。

项目页面和文档：http://www.danielrivers.com/visibly
Project GitHub页面：https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js

将某些关键功能置于其他库的上方：

可以将多个字段和值设置为显示隐藏字段的规则，而不是像其他库那样仅显示单个字段到字段规则。例;为了显示字段3，我可以要求字段1和字段2同时在两个中设置特定值，以便字段3变为可见。
RegEx匹配 - 要求文本输入文本值以匹配正则表达式模式，以便显示依赖于它的条件字段。

下面是我的演示，我试图使用复选框来显示隐藏的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();
});

Answer 1

可见插件似乎检查您添加到规则中的元素的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();
    }
  });
});

您可能添加的内容是创建一个其他内容，表明如果没有点击它们就不会显示它们。

条件字段jQuery库无法使用Checkbox

2 个答案: