0

Well I am trying to build a web page that has set of radio buttons. I am using jquery to check if all the radio buttons are checked or not. Here is the code:

<body>
<p class="Cal">Welcome,</p>
<hr />
<p class="Radio1">Answer the questions below. You will find the results after clicking 'Check my score'.</p>
<hr />
<form method="post">
<p class="Question">1. Do you sleep early at night? (Anywhere around 9-10pm)</p>
<p>
<label>
  <span class="Radio">
  <input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_0" />
</span></label>
<span class="Radio">    Yes
<br />
<label>
  <input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_1" /> 
  No
</label>
<br />
<label>
  <input type="radio" name="RadioGroup1" value="Sometimes" id="RadioGroup1_2" />
  Sometimes    </label>
</span><br />
</p>
<p class="Question">2. Do you wake up early in morning?(Anywhere around 5-7am)</p>
<p>
<label>
  <span class="Radio">
  <input type="radio" name="RadioGroup2" value="Yes" id="RadioGroup2_0" /> 
  Yes      </span></label>
<span class="Radio"><br />
  <label>
  <input type="radio" name="RadioGroup2" value="No" id="RadioGroup2_1" /> 
  No
</label>
<br />
<label>
  <input type="radio" name="RadioGroup2" value="Sometimes" id="RadioGroup2_2" /> 
  Sometimes
</label>
</span><br />
</p><input type="submit" value="Check my score" /></form></body>

Well there are 30 such questions. And my jquery code is as follows:

$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();

// Loop through available sets
$('.Radio').each(function () {
    // Question text
    var Question = $(this).prev().text();
    // Validate
    if (!$(this).find('input').is(':checked')) {
        // Didn't validate ... dispaly alert or do something
        unanswered.push(Question);

        validate = false;
    }
});

if (unanswered.length > 0) {
    msg = "Please answer the following questions:\n" + unanswered.join('\n');
    alert(msg);
}
else{
    msg = "Done!";
    alert(msg);
}
return validate;
});

Now I tried all ways possible to make this work. But even after I check radio button for each answer I keep on getting the popup saying "Please answer the following questions:" and then a blank list. I never get the message "Done!" even though answer for all the questions are checked. Where is the fault?

gireesh_bh
  • 75
  • 1
  • 1
  • 5
  • It's impossible for all the radio buttons to be checked within a group of radio buttons. Did you actually mean that you want to check that at least one radio button from each group is checked? – crush Jan 28 '14 at 21:29
  • possible duplicate of [How to check if a radio button in each group is checked in jQuery?](http://stackoverflow.com/questions/3553197/how-to-check-if-a-radio-button-in-each-group-is-checked-in-jquery) – Simon C Jan 28 '14 at 21:31
  • possible duplicate of [Determine if every radio group has had an option selected](http://stackoverflow.com/questions/6796870/determine-if-every-radio-group-has-had-an-option-selected) – j08691 Jan 28 '14 at 21:31

1 Answers1

0

You can use the HTML5 required attribute, which is better option. You can also use JavaScript loop and retrieve the value from each radio group, using

$("input:radio[name=radiogroupX]:checked")
Yam Mesicka
  • 6,243
  • 7
  • 45
  • 64