Question

在表格上我有3个问题，是/否无线电选项。如果其中任何一个为是，则出现第四个问题。如果将所有3个问题重置为否，我很难再次隐藏第4个问题。可能是一个不存在的案例，但我更愿意彻底。

我为每个问题编写了一个自动触发的自定义函数（当值！='是'时）以检查其余值，然后更新第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();*/
        }
    });

Answer 1

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

$('[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();
       }
    }
});

Answer 2

尝试这样的事情：

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();
        }
    }
});

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

2 个答案: