私は、次の形式で自分のページ上の15個のフォーム要素を持っているjQueryの

Question

にあるチェックボックスで、次の表の行の表示を切り替えます目に見える：

<tr> 
    <td colspan="3" class="fieldset-table-field-3-span"> 
     @Html.EditorFor(model => model.ExistingProductId_MappingName_FreeText) 
    </td> 
</tr> 

私は行を非表示にし、クリックでそれらを切り替えるには、いくつかのJS/jQueryのを書くが、私はそれをフックできるよう、誰もが「次の制御」の状態を切り替えるためのソリューションを持っていたのか疑問に思っ可能性私のフォームの各チェックボックスはDRYに従うためにこれを一度行うだけです。

ここでは、行の最初のカップルからのマークアップです：

<table class="fieldset-table" align="center" cellpadding="3"> 
     <tr> 
      <td class="fieldset-table-label"> 
       <label for="ExistingProductId_MappingName">Existing ID</label> 
      </td> 
      <td colspan="3" class="fieldset-table-field-3-span"> 
       <select id="ExistingProductId_MappingName" name="ExistingProductId_MappingName"><option value="">-- Not Mapped --</option> 
       <option value="Id">Id</option> 
       <option value="Name">Name</option> 
       <option value="Cost Price">Cost Price</option> 
       <option value="Unit Price">Unit Price</option> 
       </select> 
       <span class="field-validation-valid" data-valmsg-for="ExistingProductId_MappingName" data-valmsg-replace="true"></span> 
      </td> 
     </tr> 
     <tr> 
      <td class="fieldset-table-label"> 
       &nbsp; 
      </td> 
      <td colspan="3" class="fieldset-table-field-3-span"> 
       <input class="check-box" data-val="true" data-val-required="The Free text field is required." id="ExistingProductId_MappingName_IsFreeText" name="ExistingProductId_MappingName_IsFreeText" type="checkbox" value="true" /><input name="ExistingProductId_MappingName_IsFreeText" type="hidden" value="false" /> 
       <label for="ExistingProductId_MappingName_IsFreeText">Free text</label> 
      </td> 
     </tr> 
     <tr> 
      <td class="fieldset-table-label"> 
       <label for="ExistingProductId_MappingName_FreeText">Text value</label> 
      </td> 
      <td colspan="3" class="fieldset-table-field-3-span"> 
       <input class="text-box single-line" id="ExistingProductId_MappingName_FreeText" name="ExistingProductId_MappingName_FreeText" type="text" value="" /> 
      </td> 
     </tr> 

Answer 1

注意を最後の変更（）の呼び出しがときにページ処理するためにあることを確認に最も近いTRを取得します（つまり、チェックボックスがチェックされていない場合は、次の行は非表示になります）必要があるかどうかはわかりませんが、通常はこれらのような状況で使用する必要があります。

$(function(){ 
    $('input.check-box[type=checkbox]').change(function(){ 
     $(this).closest('tr').next().toggle($(this).is(':checked')); 
    }).change(); 
    }); 

Answer 2

ない私は完全にあなたの質問を理解して（前ASP掘り下げたことはありません）が、ここで私は時に次の要素が見えるようにするであろうことだと確信しチェックボックスをクリックすると、jQuery 1.7.xを使用します。

$(function(){ 

    $('yourCheckbox').on('change', function(){ 
     if ($(this).is(':checked')) //if this box is checked 
     { 
      $(this).parents('tr').next('tr').show(); 
      //show the <tr> elem that comes after the current one 
     } 
    }); 
}); 

もう一度申し訳ありません。 他にも、最初の2つのHTMLスニペットに違いはないのですが、それはなぜですか？これはとにかく

Answer 3

http://jsfiddle.net/DQZah/9/

$('input.check-box').change(function() { 
    if($(this).is(':checked')) { 
     $(this).closest('tr').next().fadeIn('fast'); 
    } else { 
     $(this).closest('tr').next().fadeOut('fast'); 
    } 
});​ 

を助け

希望は基本的に、それを示して:)