从显示的问题组中查找选定的单选按钮值
Find the selected radio button value from the displayed group of questions
我有三组问题。在任何给定的时间,我只显示其中一个。如何从显示的一组问题中找到所选问题的值?
<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="answersweri1" 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="answersweri2" 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="answersweri3" 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="answersweri4" 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="answersweri5"></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="answerswerd1" 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="answerswerd2" 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="answerswerd3" 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="answerswerd4" 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="answerswerm1" 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="answerswerm2" 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="answerswerm3" 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="answerswerm4" readonly></textarea>
<input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
<input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>
</form>
</div>
为每个问题添加一个类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="answersweri1" 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="answersweri2" 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="answersweri3" 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="answersweri4" 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="answersweri5"></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="answerswerd1" 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="answerswerd2" 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="answerswerd3" 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="answerswerd4" 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="answerswerm1" 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="answerswerm2" 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="answerswerm3" 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="answerswerm4" readonly></textarea>
<input type="button" onclick="currentAlg.submitAnswer()" value="Submit" />
<input type="button" onclick="currentAlg.resetAnswer()" value="Reset" />
<br>
</form>
</div>
一个选项是使用jQuery。
在包装表单的div中添加一个class="questions"。
例如:
$(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="answersweri1" 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="answersweri2" 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="answersweri3" 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="answersweri4" 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="answersweri5"></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="answerswerd1" 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="answerswerd2" 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="answerswerd3" 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="answerswerd4" 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="answerswerm1" 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="answerswerm2" 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="answerswerm3" 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="answerswerm4" readonly></textarea>
<input type ="button" onclick="currentAlg.submitAnswer()" value="Submit" />
<input type ="button" onclick="currentAlg.resetAnswer()" value="Reset" /><br>
</form>
</div>
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- jQuery:如何查找id是动态生成的单选按钮是否被选中
- 从 asp.net 中的数据列表客户端查找单选按钮
- 如何使用 jQuery/JavaScript 查找单选按钮值的总和
- 查找最接近的单选按钮集的值
- 查找选中的单选按钮的名称
- 在单独的表格中查找每个选中的单选按钮值
- 从显示的问题组中查找选定的单选按钮值
- 使用javascript查找ASP.NET动态创建的单选按钮选定值
- 从javascript的gridview行中查找单选按钮列表
- 如何查找DIV中的第一个输入、选择、单选按钮或复选框
- Javascript-按值查找单选按钮
- 使用JQuery查找集合单选按钮组名称
- 查找在jquery中选中的单选按钮的值
- 在jQuery中查找激活时的单选按钮
- 点击:通过单选按钮并查找选中的单选按钮
- 正在查找选定的单选按钮.你们# 39;年代错误的