Menu
I have a basic quiz/survey type application I'm working on, and I'd like to give the user a prompt before they submit if they haven't answered all the questions. All the questions are multiple choice using radio buttons:
<div class="question">
Q1: What is the second letter of the alphabet?
<div class="choices">
<input type="radio" name="question_1" value="1" /> A
<input type="radio" name="question_1" value="2" /> B
<input type="radio" name="question_1" value="3" /> C
</div>
</div>
<div class="question">
Q2: Which out of these is a berry?
<div class="choices">
<input type="radio" name="question_2" value="1" /> Apples
<input type="radio" name="question_2" value="2" /> Bananas
<input type="radio" name="question_2" value="3" /> Carrots
</div>
</div>
<div class="question"> ...etc
How do you find which groups haven't got an option ticked? Or at least, if there are any which haven't been answered?
jQuery is ok, and even preferred.
370
To find the selected radio button, you follow these steps: Select all radio buttons by using a DOM method such as querySelectorAll() method. Get the checked property of the radio button. If the checked property is true , the radio button is checked; otherwise, it is unchecked.
Use document. getElementById('id'). checked method to check whether the element with selected id is check or not. If it is checked then display its corresponding result otherwise check the next statement.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
Ah, I figured it out:
$('div.question:not(:has(:radio:checked))')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With