Javascript 从显示的问题组中查找所选单选按钮值

我有三组问题。在任何给定的时间，我只显示其中一个。如何从显示的问题集中找到所选问题的值

 <div id = "insert_questions" style="display: none">
                    <b><p>Questions on Insert Operation</p></b>
                    <form action="">
                        <input type="radio" name="radio" value="i1" checked="checked">Insert 44 to the binary search tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answeri1" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br><br>


                        <input type="radio" name="radio" value="i2">Insert 56 to the binary search tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answeri2" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br><br>

                        <input type="radio" name="radio" value="i3">Insert 68 to the binary search tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answeri3" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br><br>


                        <input type="radio" name="radio" value="i4">Mark the parent node of the newly added node?<br>
                        Output: <textarea class="scrollabletextbox" id="answeri4" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br><br>

                        <br><input type="radio" name="radio" value="i5">What is the height of the newly formed tree?<br>
                        Output: <textarea class="scrollabletextbox" id="answeri5"></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>
                    </form>
                </div>

                <div id = "delete_questions" style="display: none">
                    <b><p>Questions on Delete Operation</p></b>
                    <form action="">
                        <input type="radio" name="radio" value="d1" checked="checked">Delete the root of the tree<br>
                        Output: <textarea class="scrollabletextbox" id="answerd1" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>


                        <input type="radio" name="radio" value="d2">Delete the 3rd largest value in the remaining tree<br>
                        Output: <textarea class="scrollabletextbox" id="answerd2" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>

                        <input type="radio" name="radio" value="d3">Mark the child node(s), if any, of the node which replaced the deleted node in (2).<br>
                        Output: <textarea class="scrollabletextbox" id="answerd3" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>


                        <input type="radio" name="radio" value="d4">What is the height of the newly formed tree?<br>
                        Output: <textarea class="scrollabletextbox" id="answerd4" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>

                    </form>
                </div>

                <div id = "misc_questions" style="display: none">
                    <b><p>Miscellaneous questions</p></b>
                    <form action="">
                        <input type="radio" name="radio" value="m1" checked="checked">Do the inorder traversal of tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answerm1" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>


                        <input type="radio" name="radio" value="m2">Do the preorder traversal of tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answerm2" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>

                        <input type="radio" name="radio" value="m3">Do the postorder traversal of tree.<br>
                        Output: <textarea class="scrollabletextbox" id="answerm3" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>


                        <input type="radio" name="radio" value="m4">Mark the lowest common ancestor of the first two leaf nodes(from left)?<br>
                        Output: <textarea class="scrollabletextbox" id="answerm4" readonly></textarea>
                        <input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
                        <input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>

                    </form>
                </div>

关于插入操作的问题

将44插入二进制搜索树。

输出：



在二进制搜索树中插入56。

输出：



将68插入二进制搜索树。

输出：



标记新添加节点的父节点？

输出：




新形成的树有多高？

输出：


关于删除操作的问题

删除树的根

输出：


删除剩余树中的第三大值

输出：


标记（2）中替换已删除节点的节点的子节点（如果有）。

输出：


新形成的树有多高？

输出：


杂项问题

按顺序遍历树。

输出：


对树进行前序遍历。

输出：


对树进行后序遍历。

输出：


标记前两个叶节点的最低共同祖先（从左起）？

输出：

为每个问题添加一个类

div

：

<div id="insert_questions" class="questions">

var-ins=document.getElementById（'insert_questions'），
del=document.getElementById（'delete_questions'），
misc=document.getElementById（'misc_questions'）；
var currentAlg={
submitAnswer:function（）{
console.log（document.querySelector（'.questions:not（[style*=“display:none”]）输入：checked'）。值）；
console.log（'Submitted'）；
}
}
document.querySelector（“.buttons”）.addEventListener（'click'，函数（e）{
ins.style.display='none'；
del.style.display='none'；
misc.style.display='none'；
document.getElementById（e.target.id+''u questions'）.style.display='block'；
});
#插入问题，
#删除所有问题，
#杂项问题{
显示：无；
}

插入问题
删除问题
杂项问题
关于插入操作的问题

在二进制搜索树中插入44。

输出：




在二进制搜索树中插入56。

输出：




将68插入到二进制搜索树中。

输出：




是否标记新添加节点的父节点？

输出：






新形成的树有多高？

输出：


关于删除操作的问题

删除树的根

输出：


删除剩余树中的第三大值

输出：


在（2）中标记替换已删除节点的节点的子节点（如果有）。

输出：


新形成的树有多高？

输出：


杂项问题

按顺序遍历树。

输出：


执行树的前序遍历。

输出：


对树进行后序遍历。

输出：


标记前两个叶节点的最低共同祖先（从左起）？

输出：


一个选项是使用jQuery

在包装表单的div中添加class=“questions”

例如：


$（文档）.ready（函数（）{
$（'.questions:visible'）。每个（函数（）{
log（“在id为+$（this.attr（'id'））的div中）；
var checkedRadioButtonValue=$（this）.find（'form input[name=radio]：checked'）.val（）；
log（“选中的收音机的值为：”+checkedRadioButtonValue）；
});
});

关于插入操作的问题

将44插入二进制搜索树。

输出：



在二进制搜索树中插入56。

输出：



将68插入二进制搜索树。

输出：



标记新添加节点的父节点？

输出：




新形成的树有多高？

输出：


关于删除操作的问题

删除根o
document.querySelector('.questions:not([style*="display: none"]) input:checked').value