Formulaire utilisant les boutons radio
Les boutons radio contiennent des réponses qui s'excluent.
Le code suivant figure dans l'en-tête du document :
<script type="text/javascript">
/*
elements [i] designates each radio button of the form in the order of their creation
checked contains true (or 1) if the corresponding button is checked;
the function accepts any number of arguments;
the constraint is that all questions must contain the same number of answers proposed (can be bypassed using hidden elements).
*/
function result() {
var answers_number= 2; //number of answers proposed per question; true, false in the example
var count= 0;
for (i= 0; i < (arguments.length); i++) {
count= count + form_test.elements[(i * answers_number) + arguments[i]].checked;
}
window.alert('vous avez ' + count + ' r\xE9ponse(s) bonnes sur ' + arguments.length);
}
</script>
Le code suivant figure dans le corps du document :
<form id = 'form_test_id' >
<div class="right"><label><input type="radio" name="q1" >vrai</label>
<!-- buttons of the same group have the same name -->
<label><input type="radio" name="q1" />faux</label></div>
La grande muraille de Chine est visible depuis la Lune:<br style="clear:both;"><br>
<div class="right"><label><input type="radio" name="q2" >vrai
<label><input type="radio" name="q2" >faux</label></div>
Les humains possèdent plus de cinq sens:<br style="clear:both;"><br>
<div class="right"><label><input type="radio" name="q3" >vrai</label>
<label><input type="radio" name="q3" >faux</label></div>
Le Pingouin est incapable de voler:<br style="clear:both;"><br>
<input type= 'button' value= "Validation" onclick= 'result(1, 0, 1);'>
<!-- pass the order of the button corresponding to the exact answer, starting with 0 -->
<input type= 'reset' value= "Recommencer"> <br>
</form>
<script type= "text/javascript">
/* these constants must be initialized after the page is displayed */
const form_test= document.getElementById('form_test_id');
</script>
Il est possible d'afficher le résultat dans le corps du document ou dans une boite d'alerte. Il est à noter que le traitement du formulaire repose sur l'analyse de l'attribut checked. Au contraire si les données étaient envoyées il serait nécessaire de préciser un nom et une valeur pour chaque case à cocher.
Adresse de cette page: http://www.didac-tic.fr/web/javascript/radio.php