Question

我正在建立一个RPG网站的多项选择问卷。

我需要脚本来做两件事。

检查是否已回答所有14个问题，如果是，则显示“提交”按钮！
检查已检查的答案，稍后将点添加到各种变量中。

在这两种情况下，我都需要脚本，至少与单选按钮联系，但唉，我的新手代码技能还不够。

这是HTML

<div class="question">
<form>
<p class="bold">1. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond.  What do you do? </p>
<ul>
<li class="answer mnkA"><input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li>

<li  class="answer cleA"><input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li>

<li class="answer berA"><input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li>

<li class="answer mgeA"><input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li>

<li class="answer thfA"><input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li>

<li class="answer defA"><input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li>

<li class="answer druA"><input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li>

<li class="answer rngA"><input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li>
</ul>
</form>
</div>

这是我昨晚在Stack Overflow上搜索了一段时间之后尝试的jQuery。

（我已经创建了一个小测试按钮，我没有包含，只需要onclick来调用此功能）

$('#testbutton').on('click', function(){
    if ($('input[name=answer]:checked' == true)) {alert("its checked")} else {alert("not checked")};
});

无论是检查，取消选中还是部分检查所有按钮，它都会返回true。我知道我一定是在做错事。此外，我不想给元素本身一个检查属性，因为我不希望它在默认情况下被检查，以防有人跳过一个问题，它会给出错误的结果（我认为）

Answer 1

默认情况下，:checked选择器应匹配任何已检查的元素，因此您可能只是检查要检查的元素数量：

// Check if any elements are checked
if ($('input[name^="answer"]:checked').length > 0){
    // At least one question is answered
} 
else {
    // No questions are answered
}

如果您想查看是否已选中所有单个组，只需将组总数与已检查组的数量（或question元素数量）进行比较。

// Check if all of your questions are answered
if ($('input[name^="answer"]:checked').length == $('.question').length){
    // Everything is checked
} 
else {
    // At least one of the questions isn't answered
}

示例

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Questions</title> </head> <body> <button id='test-button'>Any Questions Answered?</button> <button id='test-all-button'>All Questions Answered?</button> <hr /> <div class="question"> <form> <p class="bold">1. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond. What do you do?</p> <ul> <li class="answer mnkA"> <input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li> <li class="answer cleA"> <input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li> <li class="answer berA"> <input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li> <li class="answer mgeA"> <input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li> <li class="answer thfA"> <input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li> <li class="answer defA"> <input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li> <li class="answer druA"> <input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li> <li class="answer rngA"> <input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li> </ul> </form> </div> <div class="question"> <form> <p class="bold">2. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond. What do you do?</p> <ul> <li class="answer mnkA"> <input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li> <li class="answer cleA"> <input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li> <li class="answer berA"> <input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li> <li class="answer mgeA"> <input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li> <li class="answer thfA"> <input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li> <li class="answer defA"> <input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li> <li class="answer druA"> <input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li> <li class="answer rngA"> <input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li> </ul> </form> </div> <script> $(function() { $('#test-button').on('click', function() { // Check if all of your questions are answered if ($('input[name^="answer"]:checked').length > 0) { console.log('At least one question is answered.'); } else { // At least one of the questions isn't answered console.log('No questions have been answered'); } }); $('#test-all-button').on('click', function() { // Check if all of your questions are answered if ($('input[name^="answer"]:checked').length == $('.question').length) { console.log('All questions answered'); } else { // At least one of the questions isn't answered console.log('At least one question is not answered'); } }); }); </script> </body> </html>

检查是否已选中单选按钮

1 个答案: