如何制作一个循环和循环遍历不同单选按钮组的 if 语句 (javascript)
how to make a loop and if statement that loops through a different groups of radio buttons (javascript)
**HTML**
<li class="option">
<input type="radio" name="Answer1" value="A">A</input><br>
<input type="radio" name="Answer1" value="B">B</input><br>
<input type="radio" name="Answer1" value="C">C</input><br>
<input type="radio" name="Answer1" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer2" value="A">A</input><br>
<input type="radio" name="Answer2" value="B">B</input><br>
<input type="radio" name="Answer2" value="C">C</input><br>
<input type="radio" name="Answer2" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer3" value="A">A</input><br>
<input type="radio" name="Answer3" value="B">B</input><br>
<input type="radio" name="Answer3" value="C">C</input><br>
<input type="radio" name="Answer3" value="D">D</input><br>
我正在创建在线调查。在调查结束时有一个提交按钮,它将收到 "Please answer all questions" 或 "Submitted" 的警报。使用哪种警报取决于用户是否回答了所有问题。我不确定如何创建此循环。请帮忙
这里,take a look at this demo boootply。由于您使用的是 Bootstrap,jQuery 应该已经是您页面的一部分。这是相关代码:
$(document).ready(function(){
$('#submitBtn').click(function(e){
e.preventDefault();
if($('li.option :radio:checked').length == $('li.option').length){
// enter code here to submit your form
alert('submitted');
}else{
alert('Please answer all questions');
}
});
});
并将HTML更正为:
<ul class="list-unstyled">
<li class="option">
<label>
<input type="radio" name="Answer1" value="A">A
</label>
<br>
<label>
<input type="radio" name="Answer1" value="B">B
</label>
等..
为了以防万一,这里是 bootstrap/jQuery 文件的 link 标记:
<!-- Latest compiled and minified jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
**HTML**
<li class="option">
<input type="radio" name="Answer1" value="A">A</input><br>
<input type="radio" name="Answer1" value="B">B</input><br>
<input type="radio" name="Answer1" value="C">C</input><br>
<input type="radio" name="Answer1" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer2" value="A">A</input><br>
<input type="radio" name="Answer2" value="B">B</input><br>
<input type="radio" name="Answer2" value="C">C</input><br>
<input type="radio" name="Answer2" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer3" value="A">A</input><br>
<input type="radio" name="Answer3" value="B">B</input><br>
<input type="radio" name="Answer3" value="C">C</input><br>
<input type="radio" name="Answer3" value="D">D</input><br>
我正在创建在线调查。在调查结束时有一个提交按钮,它将收到 "Please answer all questions" 或 "Submitted" 的警报。使用哪种警报取决于用户是否回答了所有问题。我不确定如何创建此循环。请帮忙
这里,take a look at this demo boootply。由于您使用的是 Bootstrap,jQuery 应该已经是您页面的一部分。这是相关代码:
$(document).ready(function(){
$('#submitBtn').click(function(e){
e.preventDefault();
if($('li.option :radio:checked').length == $('li.option').length){
// enter code here to submit your form
alert('submitted');
}else{
alert('Please answer all questions');
}
});
});
并将HTML更正为:
<ul class="list-unstyled">
<li class="option">
<label>
<input type="radio" name="Answer1" value="A">A
</label>
<br>
<label>
<input type="radio" name="Answer1" value="B">B
</label>
等..
为了以防万一,这里是 bootstrap/jQuery 文件的 link 标记:
<!-- Latest compiled and minified jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>