Connecting jQuery scripts with test results - php

Question

I've been trying to find a way to render the Submit button on a dynamic quiz useless until a user has selected an answer to every question. I could simply insert "required" before the answer's closing tags, but I have three different types of answers - including questions that require users to choose any number of checkboxes.
The solution appears to be a jQuery script that requires a selection for each question. But I can't get anything to work. I think maybe I'm just not getting my scripts properly associated with my form.
This is an example of my test code:
<div class="Answer">
<label class="Wide" for="q'.$QID.'-'.$Value.'"><div class="Radio"><input type="radio" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'" style="display: none;"> '.$Value.'. '.$QA.'</div></label></div>
This is what the HTML looks like:
<li id="q7">
<div class="Question">Media that pretend to be opposed to the mainstream media are called...</div>
<div class="Answer">
<label class="Wide" for="q7-A"><div class="Radio"><input type="radio" name="q7[]" id="q7-A" value="A" style="display: none;"> A. alternative media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-B"><div class="Radio"><input type="radio" name="q7[]" id="q7-B" value="B" style="display: none;"> B. soapboxes</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-C"><div class="Radio"><input type="radio" name="q7[]" id="q7-C" value="C" style="display: none;"> C. underground media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-D"><div class="Radio"><input type="radio" name="q7[]" id="q7-D" value="D" style="display: none;"> D. yellow journalism</div></label></div>
</li>
And this is the form that processes everything:
<div id="quiz2" rel="key" style="margin-top: 50px;">
<form action="grade.php" method="post" id="quiz">
<ol>
<li style="display: none;">
<?php
echo join ($Base, '');
?>
</li>
</ol>
<input type="hidden" name="PreviousURL" value="<?php echo $MyURL; ?>" id="url" />
<input type="hidden" name="user_token" value="<?php echo isset($_POST['user_token']) ? $_POST['user_token'] : '' ; ?>" />
<input type="submit" value="Submit Quiz" />
</form>
</div><!-- quiz-container -->
So what do I have to do to make the following jQuery work with the above? I changed the ID number to quiz, matching my form. I don't understand what "index" means, but I've tried replacing "value" with a number of variables. Nothing works.
<script>
var inputs = $('#quiz :input');
inputs.each(function(index, value) {
if ($(value).val() == '') { //check if the input is empty
//return the error
echo 'ERROR!';
}
});
</script>
Here's another script that looks interesting, but I don't know how to associate it with my form:
<script>
function checkInput() {
var inputs = $("input");
check = 0;
for (var i = 0; i < inputs.size(); i++) {
var iVal = $(inputs[i]).val();
if (iVal !== '' && iVal !== null) {
$(inputs[i]).removeClass('input-error');
} else {
$(inputs[i]).addClass('input-error');
$(inputs[i]).focus(function() {
$("input").removeClass('input-error');
$(inputs[i]).off('focus');
});
check++;
}
}
if (check > 0) {
return false;
} else {
return true;
}
}
checkInput()
</script>
I've been playing with both scripts, manipulating various variables, but every time I click the Submit button without answering a question, it forwards me to the next page.