获取特定 div 的子元素中输入字段的值答案

【问题标题】：Get the values of input fields within child elements of a specific div获取特定 div 的子元素中输入字段的值
【发布时间】：2011-04-21 10:16:08
【问题描述】：

我将表单分成多个部分，并且我正在尝试让脚本检查每个部分中的空字段数。以前我用每个部分的 id 编写了一个数组，并让它循环遍历该数组，但我想找到一个不依赖于预定义数据的更通用的解决方案。

一开始我是这样尝试 .find() 的

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section).find('input');
    $.each(inputs, function(){
        if(this.val() == '') { totblank++; );
    }

当那不起作用时，我尝试了 .serializeArray()

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section + ' input').serializeArray();
    $.each(inputs, function(i, field) {
        if (field.value == '') { totblank++; }
    });

然后跟进

    if(totblank > 0){
        $("#"+section+"B").html(totblank+" Empty");
    } else {
        $("#"+section+"B").html("All full!");
    }       
}

section 是 div 的 id，该 div 有一个带有表单输入的表格。

这是我第一次使用这些功能，所以我不确定我哪里出错了。感觉就像我期待的输出不是它。

【问题讨论】：

“+= totblank”的语法有效吗？
@Tx3，我只想问同样的问题。我以前从未见过，乍一看，这似乎不是有效的。 w3schools.com/js/js_operators.asp
哎呀，你说得对，它应该是 totblank++。我也忘记设置了。已更新。

标签： javascript jquery forms input

【解决方案1】：

您的代码中有一些语法错误。固定：

function blankFields(section){
   var totblank = 0;
   var inputs = $('#' + section).find('input');
   inputs.each(function(){
      if($(this).val() == '') totblank++;
   });

   alert(totblank); 
}

【讨论】：

我知道我只是在搞砸语法。这行得通，但我必须创建第二个对选择框做同样事情的人。谢谢！

【解决方案2】：

我认为您可以尝试查找所有空字段，然后浏览回 DOM 以检索父部分。

之后，将结果存储在关联数组中，例如"section" => count。如果节不在数组中，则添加条目"newsection" => 1，否则如果节在，则增加节的计数。

【讨论】：

【解决方案3】：

我认为这部分应该会给你一个错误

+= totblank

或者我可能对 JavaScript 语法不够了解..

不管怎样，试试这个

totblank++;

总体而言，确保您真正在处理数字也是一件好事。常见的错误是获取.val() 并做一些数学运算，例如'1' + 1。结果是 11，这是你可能不想要的东西

【讨论】：

【解决方案4】：

写了一个小sn-p来解决这个问题：http://jsfiddle.net/9jdmH/

$('#check').click(function() {
    $('.section').each(function() {
        checkSection($(this));
    });
})

function checkSection(section) {
    //assuming we're getting a jquery object. easily modifieable
    section.find('input[type="text"]').each(function() {
        if ($(this).val() == '') {
            $('#log').prepend('<p>Found an empty input section ' + section.index() + '</p>');
        }
    })
}

这适用于一般标记类型。

您需要根据需要的信息类型进行一些更改。我没有使用 ID，所以我只是使用 .index() 指出哪些是空的。只要您在 checkSection 方法中获取/制作 jquery 引用就可以了。

【讨论】：

我应用的过滤器 (input[type="text"]) 检查文本框。您可以删除过滤器以使其也适用于复选框。
如果添加 .filter("[value='']") 可以删除 .val() == '' 检查
@potatopeelings 是的，但不确定在需要选中属性的复选框周围会如何表现

【解决方案5】：

我对此的看法： http://jsfiddle.net/fqBrS/

function findNumberOfEmptyInputs(section) {
    var inputs = $('#'+section+' input[type="text"]');
    alert(inputs.filter(":empty").length);

}
findNumberOfEmptyInputs("section2");

好消息是您不必（至少明确地）使用循环。评论赞赏:)

【讨论】：

OP 希望转向一个解决方案，他不必将部分列表传递给函数。
最初的帖子虽然说明了这一点，但似乎另有建议，另请参阅接受的答案。

【解决方案6】：

带有示例的代码。应该提供与您现在几乎相同的输出。

<html>
<head>
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        function checkBlank(f){
            $(f).find(".section").each(function () {
                var c = $(this).find("input[value='']").size()
                $("#" + $(this).attr("id") + "B").text(c ? c + " Empty" : "All full");
            })
            return false
        }
    </script>
</head>

<body>
    <form onsubmit="return checkBlank(this)">
        <div class="section" id="section1">
            <input type="text">
            <input type="text">
        </div>
        <div class="section" id="section2">
            <input type="text">
            <input type="text">
        </div>

        <input type="submit" value="Click">
    </form>

    <div id="section1B"></div>
    <div id="section2B"></div>
</body>
</html>

【讨论】：