当一组元素的所有元素都具有特定值时，如何隐藏表单元素

How do I hide a form element when all of a set of elements have a certain value?

本文关键字：元素表单隐藏何隐藏一组更新时间：2023-09-26

在表格上，我有 3 个问题，带有是/否单选选项。如果其中任何一个是"是"，则会出现第 4 个问题。如果所有 4 个问题都重置为否，我正在努力使第 3 个问题再次隐藏。可能不存在的情况，但我宁愿彻底。

我为每个问题编写了一个在单击时触发的自定义函数（当值！= 'Yes'）以检查其余值，然后更新第 4 个值，但似乎它们的值没有得到更新。函数中的 q6、q7 和 q8 保持不变 = "是"。我以为我的函数可以访问实时表单，但我一定做错了什么？

        //question_6exp
    $("[name = question_6]").change(function()
    {
        if ( $(this).val() == 'Yes' )
        {
            $("#question_6exp").show();
            $("#question_9").show();
        }
        else
        {
            $("#question_6exp").hide();
            $("#question_9").hide_question9();
        }
    });
    //question_7exp
    $("[name = question_7]").change(function()
    {
        if ( $(this).val() == 'Yes' )
        {
            $("#question_7exp").show();
            $("#question_9").show();
        }
        else
        {
            $("#question_7exp").hide();
            $("#question_9").hide_question9();
        }
    });
    //question_8exp
    $("[name = question_8]").change(function()
    {
        if ( $(this).val() == 'Yes' )
        {
            $("#question_8exp").show();
            $("#question_9").show();
        }
        else
        {
            $("#question_8exp").hide();
            $("#question_9").hide_question9();
        }
    });
    //function hide_question9()
    $.fn.hide_question9 = function()
    {

        var q6 = $("[name = question_6]").val();
        var q7 = $("[name = question_7]").val();
        var q8 = $("[name = question_8]").val();
        //alert('TEST: '+q6+q7+q8);
        if ( (q6 == 'No') && (q7 == 'No') && (q8 == 'No') )
        {
            //$("#question_9").hide();
            return this.hide();
        }
        else
            return false;
    }

更新：我根据下面收到的 2 个回复更新了我的代码。不幸的是，两者都没有奏效。我在 3 个问题中添加了一个类，以便更轻松地选择这 3 个问题。我主要调整了JoDev的布局。我注释掉了 else 状态中的代码并在那里尝试了 Aguardientico 代码 - 它目前已被注释掉。

$(".temp1").change(function()
    {
        var myName = $(this).attr('name');
        if ( $(this).val() == 'Yes' )
        {
            $("#question_9").show();
            $("#"+myName+"exp").show();
        }
        else
        {//alert($(this).val());
            $("#"+myName+"exp").hide();
            var alltoNo = true;
            $(".temp1").each(function()
            {
                if ( $(this).val() == 'Yes' )
                {
                    alltoNo = false;
                }
                //return;
            });
            if ( alltoNo )
                $("[name = question_9]").hide();
            /*if ( $("[name=question_6][value=Yes]:checked").length == 0 )
                $("[name = question_9]").hide();*/
        }
    });

这是一个最简单的方法（只是一个开始）

$('[name^="question_"]:not([name="question_9"])').change(function() {
    if ( $(this).val() == 'Yes' )
    {
       $("#question_9").show();
       $("#question_"+$(this).attr('name').replace('question_', '')+"exp").show();
    } else {
       $("#question_"+$(this).attr('name').replace('question_', '')+"exp").hide();
       var alltoNO = true;
       $('[name^="question_"]:not([name="question_9"])').each(function() {
          if($(this).val() == 'Yes') {
             alltoNo = false;
          }
          return;
       });
       if(alltoNo) {
         $('[name="question_9"]').hide();
       }
    }
});

尝试这样的东西：

.HTML：

<input type="radio" name="question_6" value="Yes"/> 6 Yes
<input type="radio" name="question_6" value="No"/> 6 No
<input type="radio" name="question_7" value="Yes"/> 7 Yes
<input type="radio" name="question_7" value="No"/> 7 No
<input type="radio" name="question_8" value="Yes"/> 8 Yes
<input type="radio" name="question_8" value="No"/> 8 No
<div id="question_6exp">Q6</div>
<div id="question_7exp">Q7</div>
<div id="question_8exp">Q8</div>
<div id="question_9exp">Q9</div>

.JS：

$('[name=question_6], [name=question_7], [name=question_8]').change(function(){
    if (this.value=="Yes") {
        $("#" + this.name + "exp").show();
        $("#question_9exp").show();
    } else {
        $("#" + this.name + "exp").hide();
        if ($("[name=question_6][value=Yes]:checked, [name=question_7][value=Yes]:checked, [name=question_8][value=Yes]:checked").length == 0) {
            $("#question_9exp").hide();
        }
    }
});