Search code examples
jqueryradio-buttonchecked

Checked to see if radio buttons are checked


I'm making a multiple choice questionaire for an RPG website I'm building.

I need script to to do two things.

  1. Check to see if ALL 14 questions have been answered, and if so make the SUBMIT button appear!

  2. Check to see which answers have been checked, and add the points to various variables later on.

in both cases, I need script that at the very least makes contact with the radio buttons but alas, my newbie code skills are not sufficient.

Here is the 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>

Here is the jQuery I tried last night, after search here on Stack Overflow for a while.

(I've created a small test button, that I didn't include, with an onclick to call this function)

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

No matter if all buttons are checked, unchecked, or partially checked, it always returns true. I know I must be doing something wrong here. Also I don't want to give the element itself a checked attribute, because I don't want it to read as checked by default in case someone skips a question, it will give skewed results (I think)


Solution

  • By default, the :checked selector should match any elements that are checked, so you likely just check to see how many elements are 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
    }
    

    If you want to see if all of your individual groups are checked, just compare the total number of groups to the number of checked ones (or the number of question elements).

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

    Example

    enter image description here

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