如何检查隐藏页签上勾选了哪些值

Question

我在JS方面比较新，我有一个问题。基本上，我正在尝试访问文件在一个选项卡，不是在页面上可见。

我正在做一个调查问卷，其中用户通过选择单选按钮回答其中一个问题。单选按钮有十个可能的答案(1-10)，根据答案，将出现相同数量的选项卡。

示例：如果用户回答为1，则会打开一个选项卡，其中包含带有“是”“否”选项的附加问题。如果用户回答为2，则会出现两个选项卡，但页面上只显示第一个选项卡。用户可以通过点击第二个选项卡来访问它，但在这种情况下，选项卡1将不再可见。也许下图会更清楚。

在此输入图像说明

不久，我正在尝试做的是检查在隐藏选项卡上检查了哪个值。

我给出了我的代码示例，如果用户在初始问题中用1或2回答，这段代码可以工作，用户选择1作为初始响应，因为它只在第一个if语句中进行

JS：

var QA_0、QA_1、Q1_0、Q1_1、Q2_0、Q2_1；

//QA_0和QA_1表示初始问题_0用于答案1,_1用于答案2

//Q1_0和Q1_1是第一个选项卡上的值_0表示回答是，_1表示回答否

//Q2_0和Q2_1是第二个选项卡上的值_0表示回答是，_1表示回答否

函数getAnswers（）{CheckVariable=

                    if (QA_0=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_0").checked == true) {
                             Q1_0=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_0").checked;
                             Q1_1=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_1").checked;
                       }
                       
                    else  {  Q1_0=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_0").checked;
                             Q1_1=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_1").checked;
                             Q2_0=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxxc_0").checked;
                             Q2_1=document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_1").checked; 
                       }
                    }

Answer 1

在CSS中隐藏选项卡有两种方法。一个是显示:none和可见性:hidding

display:none表示根本不会出现在页面上。

可见性:hidden表示将不可见，但已分配空间（仍然活动）

选择第二种策略。保持#master_defaultcontent_xxxxxxxxxxx_0标记活动以保存“checked”状态。

然后，我推荐数据属性将“checked”状态保存到标记中。

数据属性

那么html如下所示。

<div 
id=master_DefaultContent_xxxxxxxxxxxxxx_0 
style="visibility:hidden"
data-checked="true"> 
some tab 1 
</div>

<div 
id=master_DefaultContent_xxxxxxxxxxxxxx_1 
style="visibility: visible" 
data-checked="false" > 
some tab 2
</div>

<div 
id=master_DefaultContent_xxxxxxxxxxxxxx_2
style="visibility: visible"
data-checked="true" > 
some tab 3
</div>

<div 
id=master_DefaultContent_xxxxxxxxxxxxxx_3
style="visibility:hidden"
data-checked="false" > 
some tab 4
</div>

然后，用javascirpt代码检索它，就像您所做的那样。

QA_0 = document.getElementById("master_DefaultContent_xxxxxxxxxxxxxx_0").checked

我不确定它有帮助，但我希望它有帮助：）