Javascript 隐藏表单的某些部分，直到填写某些字段

请帮我写代码。我试图隐藏一些字段，直到所有其他字段都被填充

这是我的密码：

HTML

JQuery

$(".field1",".field2",".field3").keyup(function () {
    if ($(".field1",".field2",".field3").val() != "") {
        $("#group2").css("visibility", "visible");
    } else {
        $("#group2").css("visibility", "hidden");
    }
});

---

我会尝试这样做：

$('#group1 > input[type="text"]').keyup(function () {
    if ($('.field1').val() !== '' && $('.field2').val() !== '' && $('.field3').val() !== '') {
        $('#group2').css('visibility', 'visible');
    } else {
        $('#group2').css('visibility', 'hidden');
    }
});

---

祝你好运

Jquery中的比较运算符错误。应该是，不是=

好的，所以我查看了您的代码，并重新编写了代码，使其更加灵活，并允许代码在其他地方（即其他表单、页面等）使用。我编写了一些实用程序函数、一个助手，并为jquery提供了一个regex过滤器

这些函数将使用dom元素数组或单个元素（因此可以检查多个字段或仅检查一个字段）

CSS中的主要区别在于，该类用于隐藏所有元素，并使用特定元素的ID取消隐藏。换句话说，为所有要隐藏

“hidden”

类的元素和每个元素提供一个唯一的ID，然后将该ID传递给帮助器的

取消隐藏此

参数以取消隐藏它。将要检查是否为空的helper dom元素传递给helper函数的

checkThis

参数

jsfiddle：

html示例：

<div id="group1">

        <label>Field 1:</label>
        <input type="text" class="field1"/><br/>
        <label>Field 2:</label>
        <input type="text" class="field2"/><br/>
        <label>Field 3:</label>
        <input type="text" class="field3"/><br/>

</div>

<div class="hidden" id="part_1">

       <label>Field 4:</label>
       <input type="text" class="field4"/>

</div>
<div class="hidden" id="part_2">

       <label>Field 5:</label>
       <input type="text" class="field5"/><br>
       <label>Field 6:</label>
       <input type="text" class="field6"/>

</div>

JS代码和正则表达式过滤器：

//regex filter http://james.padolsey.com/javascript/regex-selector-for-jquery/
// vvv Allows the use of regex to search with vvv
jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
// ^^^ Allows the use of regex to search with ^^^

//main JS 
$(document).ready(function() {
    fieldsInitial = $("input:regex(class, field[1-3])")
    fieldsPart1 = $("input:regex(class,field4)")


    checkAndUnHide(fieldsInitial,"#part_1")
    checkAndUnHide(fieldsPart1,"#part_2")

})

// vvv my js code, place this in separate file to use the functions vvv
//Helper Function
function checkAndUnHide ( checkThis,unHideThis) {
    checkThis.keyup(unHideThis, function(event){ 
        unHide(checkThis,event.data)
    }) 
}

//checks if the .val() of each element is blank or not
function allElementsFilled(arrayOfDomElements) {
return !(arrayOfDomElements.map(function () {
         return $(this).val()})
         .get()
         .some(function (element) { return element == ""})
        )
}

//will unhide element if check's .val() is not blank
function unHide(check, element) {
    if(typeof check !== 'string'){
        if (allElementsFilled(check)) {
            $(element).css("visibility", "visible")            
        }
    }
    else{
        if(check.val != ""){
            $(element).css("visibility", "visible")
        }
    }
}

---

发布您当前的代码。当您在问题中没有任何代码的情况下发布到JSFIDLE的链接时，您看到了警告，但您选择通过将文本突出显示为代码来尝试规避规则。请始终在问题中张贴您的代码。jsFiddle应该是次要的。如果JSFIDLE不可访问，那么如果问题中没有代码，那么问题将失去所有价值。好的，我将首先添加codeWell我将更改

文档。getElementById

用于

$

，只需在搜索字符串的前面添加一个

#

，使用jquery，为什么不将其用于所有内容（获取值只是

.val（）

而不是

.value

）？为什么不把你想要隐藏的表单的那些部分放在一个具有相同类但不同ID的div中，并使用该类将它们设置为使用CSS隐藏，然后使用Jquery通过这些ID选择它们来显示它们？我想做div，并将它们放在特定字段周围，但我不太懂编码。

<div id="group1">

        <label>Field 1:</label>
        <input type="text" class="field1"/><br/>
        <label>Field 2:</label>
        <input type="text" class="field2"/><br/>
        <label>Field 3:</label>
        <input type="text" class="field3"/><br/>

</div>

<div class="hidden" id="part_1">

       <label>Field 4:</label>
       <input type="text" class="field4"/>

</div>
<div class="hidden" id="part_2">

       <label>Field 5:</label>
       <input type="text" class="field5"/><br>
       <label>Field 6:</label>
       <input type="text" class="field6"/>

</div>

.hidden {
    visibility: hidden;
}

//regex filter http://james.padolsey.com/javascript/regex-selector-for-jquery/
// vvv Allows the use of regex to search with vvv
jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
// ^^^ Allows the use of regex to search with ^^^

//main JS 
$(document).ready(function() {
    fieldsInitial = $("input:regex(class, field[1-3])")
    fieldsPart1 = $("input:regex(class,field4)")


    checkAndUnHide(fieldsInitial,"#part_1")
    checkAndUnHide(fieldsPart1,"#part_2")

})

// vvv my js code, place this in separate file to use the functions vvv
//Helper Function
function checkAndUnHide ( checkThis,unHideThis) {
    checkThis.keyup(unHideThis, function(event){ 
        unHide(checkThis,event.data)
    }) 
}

//checks if the .val() of each element is blank or not
function allElementsFilled(arrayOfDomElements) {
return !(arrayOfDomElements.map(function () {
         return $(this).val()})
         .get()
         .some(function (element) { return element == ""})
        )
}

//will unhide element if check's .val() is not blank
function unHide(check, element) {
    if(typeof check !== 'string'){
        if (allElementsFilled(check)) {
            $(element).css("visibility", "visible")            
        }
    }
    else{
        if(check.val != ""){
            $(element).css("visibility", "visible")
        }
    }
}