从显示的问题组中找到选定的单选按钮值

Question

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

 <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>

Answer 1

为每个问题添加一个类div：

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

然后您可以使用 querySelector() 来定位可见的选中 input，如下所示：

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

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"]) input:checked').value);
    console.log('Submitted');
  }
}

document.querySelector('.buttons').addEventListener('click', function(e) {
  ins.style.display = 'none';
  del.style.display = 'none';
  misc.style.display = 'none';
  document.getElementById(e.target.id + '_questions').style.display = 'block';
});

#insert_questions,
#delete_questions,
#misc_questions {
  display: none;
}

<div class="buttons">
  <button id="insert">Insert questions</button>
  <button id="delete">Delete questions</button>
  <button id="misc">Miscellaneous questions</button>
</div>
<div id="insert_questions" class="questions">
  <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" class="questions">
  <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" class="questions">
  <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>

Answer 2

一个选项是使用 jQuery。

将 class="questions" 添加到包装表单的 div 中。

例如：

$(document).ready(function() {
    $('.questions:visible').each(function() {
        console.log("In the div with id: " + $(this).attr('id'));
        var checkedRadioButtonValue = $(this).find('form input[name=radio]:checked').val();
        console.log("the value of the checked radio is: " + checkedRadioButtonValue);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions" 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 class="questions" id = "delete_questions" style="display: block">
    <b><p>Questions on Delete Operation</p></b>
    <form action="">
        <input type="radio" name="radio" value="d1" >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" checked="checked">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 class="questions" id = "misc_questions" style="display: none">
    <b><p>Miscellaneous questions</p></b>
    <form action="">
        <input type="radio" name="radio" value="m1">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" checked="checked">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>