切换下一表行的可见性与复选框jQuery中

Question

我有以下格式我的第15个的表单元素：

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

选中该复选框处于选中状态，我想下一行是可见：

<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

注意最后一个变化（）调用来处理页面时首先被加载（即如果复选框未选中，下一行将被隐藏）。不确定是否需要这样做，但通常最终需要在这些情况下使用它。

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

基本上得到检查最接近的TR则显示它:)