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

【问题标题】：How can I display a fieldset if an input element inside that fieldset has a value?如果该字段集中的输入元素具有值，我如何显示该字段集？
【发布时间】：2011-06-29 23:50:16
【问题描述】：

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

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

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

示例表格。我希望显示 ID 为“toggleMe”的字段集，因为输入“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();
});

【问题讨论】：

标签： jquery

【解决方案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();
});

【讨论】：

【解决方案2】：

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

【讨论】：