Question

我有一个包含div结构的表单，如下所示：

<form id="baseform">
    <div class="container">
     <div class="subheader"><h2>Section 1</h2></div>
     <div class="row">
        <textarea id=T_01></textarea>  
        <input id="T_02" type="text" />
     </div>
     <div class="row">
        [more form fields]
     </div>
    </div>
    <div class="container">
     <div class="subheader"><h2>Section 2</h2></div>        
       <div class="row">[more form field, etc.]
     </div>
   </form>

我想在.row上的.subheader下方隐藏那些空格式输入document ready div（我已使用toggle()显示.row div .subheader上的click。

似乎这样的事情应该有效：

$(document).ready(function() {
    $('.row :input[@value=""]').parent('.subheader').nextAll('.row').hide();
});

但没有骰子。想法？

Answer 1

这适用于大多数表单输入，但是，对于具有值集的复选框和无线电，您可能需要其他条件逻辑。需要查看它们是否为:checked。

$('.subheader .row :input').each( function() {
   if ( !$(this).val().length )
      $(this).parent('.row').hide();
});

修改 - 错过了我的选择器中的:input。

编辑2 - 未隐藏实际行，只隐藏表单字段。

Answer 2

试试这个：

$(function () {
    $(".row :input[value='']").hide();
});

Answer 3

$('.row input').filter(function() {
    return this.value.length ? this : null;
}).parent().hide();

基于空子表单输入值隐藏给定部分中的div

3 个答案: