2011-06-29 3 views
1

のフィールドセット内の入力要素のうち、に値がある場合、特定のフィールドセットを表示する必要があるフォームがあります。フィールドセット内の入力要素に値がある場合、フィールドセットを表示するにはどうすればよいですか?

私が書いた現在のコードは、フィールドセット内に値を持つ入力要素が1つしかない場合にのみ機能しますが、2番目の入力要素を配置すると正しく動作しません。私は、要素を巡回する必要があるステップがないと仮定しています。私はどこかに.each()を実装する必要があると仮定しています。

このフォームは他の開発者によって時々変更されるため、の入力を直接ターゲティングする代わりに検索する必要があります。何か助けてくれてありがとう。

例のフォーム。

<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コード:

入力「チーズ」が値を持っているので、私にはない、またはその逆であっても、「パン」かかわらず、ID「toggleMe」を表示するとフィールドセットを希望します

$(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() { 
    if($("#toggleMe").find('input').val()) { 
     $("#toggleMe").show(); 
    } else { 
     $("#toggleMe").hide(); 
    } 
    } 
    toggleOptions(); 
}); 

答えて

1


それとももう少し伝統的な(そしておそらくより速い)何か:

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

それは動作します。ありがとうございました。私は今、いくつかのことを勉強しています。 – supergalactic

+0

@cloudhead:問題ありません!がんばろう... –

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