如果該字段集中的輸入元素具有值，我該如何顯示字段集？

Question

我有一個表單，如果任何該字段集中的輸入元素有一個值，則需要顯示某個字段集。

我寫的當前代碼只有在fieldset中有一個帶有值的輸入元素時才起作用，但是如果我放置了第二個輸入元素，則它無法正常工作。我假設我錯過了一個需要循環遍歷元素的步驟。我假設我需要在某處實現.each（）。

此表單將由其他開發人員不時更改，所以我必須找到輸入，而不是直接定位它們。感謝您的任何幫助。

示例窗體。我想id爲「toggleMe」顯示字段集，因爲輸入「奶酪」有一個值，即使「饅頭」不，反之亦然：

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