Question

我有一个表单需要显示某个字段集，如果该字段集中的任何输入元素都有值。

我编写的当前代码只有在一个输入元素的字段集内有一个值时才有效，但是如果我放置了第二个输入元素，它就无法正常工作。我假设我错过了一个需要在元素中循环的步骤。我假设我需要在某处实现.each（）。

此表单将由其他开发人员不时更改，因此我必须查找输入，而不是直接定位它们。感谢您的任何帮助。

示例表格。我希望显示id为“toggleMe”的fieldset，因为输入“cheese”有一个值，即使“bread”没有，反之亦然：

<form action="scratch_submit" method="get" accept-charset="utf-8">
  <fieldset id="toggleMe">
    <label for="bread">bread</label><input type="text" name="bread" value="" id="bread">
    <label for="cheese">cheese</label><input type="text" name="cheese" value="cheese is here" id="cheese">
  </fieldset>
  <fieldset id="neverToggle">
    <label for="wine">wine</label><input type="text" name="wine" value="wine is here" id="wine">
    <label for="beer">beer</label><input type="text" name="beer" value="" id="beer">
  </fieldset>
</form>

我的jQuery代码：

$(document).ready(function() {
  function toggleOptions() {
    if($("#toggleMe").find('input').val()) {
      $("#toggleMe").show();
    } else {
      $("#toggleMe").hide();
    }
  }
  toggleOptions();
});

Answer 1

怎么样：

$(document).ready(function() {
    function toggleOptions() {
        var value = $("#toggleMe").find("input").map(function () {
            return this.value;
        }).get().join('');
        if (value) {
            $("#toggleMe").show();
        } else {
            $("#toggleMe").hide();
        }
    }
    toggleOptions();
});

基本上连接所有子输入的值，并检查该值是否为空。

或者更传统的东西（可能更快）：

$(document).ready(function() {
    function toggleOptions() {
        var populated = false
            , $inputs = $("#toggleMe").find("input")
            , i = 0;

        while (!populated && i < $inputs.length) {
            populated = !!$inputs[i].value;
            i++;
        }

        if (populated) {
            $("#toggleMe").show();
        } else {
            $("#toggleMe").hide();
        }
    }
    toggleOptions();
});

Answer 2

$(document).ready(function() {
  function toggleOptions() {      
      if ($("#toggleMe :input").filter(function() {
          return $(this).val();
    }).size() > 0) {
              $("#toggleMe").show();
    } else {
              $("#toggleMe").hide();
    }
  }
  toggleOptions();
});

如果该字段集中的输入元素具有值，如何显示字段集？

2 个答案: