Question

之前我确实问了这个问题，但我的客户希望在问卷上创建一些功能。如果它是空的，他希望所有“Notes文本字段”都被隐藏。只有“Notes文本字段”具有值时才会显示它。如果有值或没有值，也需要更新/检查是/否单选按钮。这是“insomniac”之前的代码。

$('.notes').hide();
$('input[type="radio"]').change(function () {
  if ($(this).val() == "Yes") {
    $(this).closest('tr').next('tr.notes').slideDown();
  } else {
    $(this).closest('tr').next('tr.notes').slideUp();
  }
});

但是，我需要首先验证文本字段是否有值（实际上这里将使用1到33个文本字段，其中大部分都有值）。

var vals = $('.notes input[type="text"]').val(); 
if(vals == "") {
  console.log('negative');
  $('tr.notes').slideUp();
} else {
  console.log('positive');
  $('.query input[value="Yes"]').attr({
    checked: "checked"
  });
  $('tr.notes').slideDown();
}

这是我正在讨论的原始格式...... jQuery Bind or Index Form和Insomniac Demo

Answer 1

您需要检查.html()的长度并从视图中相应地删除它。

if ($(element).html().length == 0)
    $(element).hide();

如果要在文档加载时静态加载笔记，那就太棒了，你只需要这样做：

$('.notes').each(function(){
    if ($(this).html().length == 0)
        $(this).hide();
});

否则，如果你动态加载它们，一旦你加载它们，使用第一个代码检查空虚。

Answer 2

//将焦点设置为输入，这样我们就可以检查模糊事件输入的内容。

        $('.notes').hide();

        $('input[type="radio"]').change(function () {
            if ($(this).val() == "Yes") {
                 $(this).closest('tr').next('tr.notes').slideDown(); 
                $(this).closest('tr').next('tr.notes').find('input').focus();                                
             } else {
                 $(this).closest('tr').next('tr.notes').slideUp();
             }
      });

//与所有输入绑定的模糊事件

      $('input').blur(function(){
      if ($(this).val().length == 0){       
    $(this).closest('tr.notes').slideUp();
      }
     });

//更新了小提琴

Answer 3

经过一番研究并不停地编写脚本。我最终决定将代码更新为基本设置。 “我不是程序员”实际上......

$(".report-notes fieldset").each(function (i) {
i = i+1;
$(this).addClass("item"+i);
$('.item'+i+' input[type="radio"]').on('change',function(){
    if($(this).val() == 'Yes') {
        $('.item'+i+' .notes').slideDown();
    } else {
        $('.item'+i+' .notes').slideUp();
    }
});

$(document).ready(function(){
    var notes = $('.item'+i+' .notes input[type="text"]').val();
    if(notes === '') {
        console.log('walang laman');
        $('.item'+i+' .notes').hide();
    } else {
        console.log('meron laman');
        $('.item'+i).find('input[value="Yes"]').attr({
            checked: "checked"
        });
        $('.item'+i+' .notes').slideDown();
    }
});
});

Updated Fiddle Source

多个问卷

3 个答案: