Ne pas cocher un bouton radio par défaut au chargement de la page

Par Bessino, il y a 9 ans

Les bases HTML/CSS

Bonjour,

j'ai créé un formulaire avec 2 boutons radio, donc on peut choisir soit l'un ou l'autre.
Le soucis c'est que je ne sais pas comment faire qu'au chargement de ma page, les boutons ne soient pas cocher par défaut.

HELP ME , pleaseeeeeeeee ????

cordialement,

11 réponses

betaWeb, il y a 9 ans

Salut,

As-tu du code à nos fournir ?

Bessino, il y a 9 ans

voilà mon code :

<!-- Radio box --> <div class="radio-client"> <div> <input type="radio" class="btn-radio" name="client" value="Oui" id="oui-client" /> <label for="oui-client"></label><p>Je suis déjà client KONE</p> </div> </div> <div class="radio-client"> <div> <input type="radio" class="btn-radio" name="client" value="Non" id="non-client"/> <label for="non-client"></label><p>Je ne suis pas encore client KONE</p> </div> </div>
betaWeb, il y a 9 ans

Normalement aucun des deux ne devrait être check par défaut, mis à part si tu précises l'attribut checked.

Bessino, il y a 9 ans

C'est ce qui m'étonne ...
Voilà le css :

.btn-radio{ display:none; } [type="radio"] + label { background: none repeat scroll 0 0 #ffffff; border-radius: 2px; content: ""; height: 15px; left: 0px; position: absolute; top: 0px; width: 16px; cursor:pointer; } [type="radio"]:checked + label:after { content: url(../img/arrow-checkbox.png); position: absolute; top: -0px; left: 1px; font-size: 14px; color: #99a1a7; transition: all .2s; } [type="radio"]:checked + label { background: none repeat scroll 0 0 #ffffff; border-radius: 2px; content: ""; height: 15px; left: 0px; position: absolute; top: 0px; width: 16px; } [type="radio"] + label:active, .btn-radio:checked + label:active { box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.5) inset; transition: all .2s; }

Et je récupère la valeur comme ça en ajax :

var client = $("input[name='client']:checked").val();
shinix, il y a 9 ans

Fait nous un jsfiddle parce que la c'est compliqué à dire.

Mais je pencherai sur le CSS qui foire. Essaie en le supprimant et si ça fonctionne toujours pas met sur jsfiddle po0ur voir si tu arrives à reproduire le problème.

Bessino, il y a 9 ans

Alors je pense ça vient du css aussi. Sinon voici le lien de mon jsfiddle : fichier.jsfiddle

Par contre j'ai pas mis tout le code html, css et js

betaWeb, il y a 9 ans

Beh tu as un attribut checked="checked" sur le premier input, c'est normal qu'il soit checked.

Bessino, il y a 9 ans

T'a raison :) , maintenant ça fonctionne mais qu'au premier chargement de la page.
Mais si je remplis le formulaire et que je recharge la page, l'input reste checked.
Est ce qu'il y a un moyen de reset cela après le rechargement de la page ??

betaWeb, il y a 9 ans
$(document).ready(function () { $("input[name='client']").removeAttr('checked'); // OU $("input[name='client']").prop('checked', false); });
Bessino, il y a 9 ans

lol, je l'avais en tete en plus le code mais j'étais pas sur de moi lol.....

Merci bcp en tous cas :)

Bessino, il y a 9 ans

Juste une dernière question les gars :

En fait j'aimerais afficher un message d'erreur si aucun input type="radio" name="client" n'est pas checked en ajax ?

Pour mes autres champs il n'y pas de soucis, le message d'erreur s'affiche sans problème si un ou aucun des champs n'est pas rempli.
Voilà mon code ajax pour afficher l'erreur :

$(function(){ $("#form").submit(function(event){ var alert = $("#alert"); var societe = $("#societe").val(); var nom = $("#nom").val(); var prenom = $("#prenom").val(); var adresse = $("#adresse").val(); var codePostal = $("#codePostal").val(); var ville = $("#ville").val(); var email = $("#email").val(); var telephone = $("#telephone").val(); var contact = $("#contact").val(); // permet de recup la valeur de l'input radio var client = $("input[name='client']:checked").val(); //Vérification email var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); var validEmail = emailReg.test(email); //verification téléphone var regex = new RegExp(/^(0|\+33)[1-9]([-. ]?[0-9]{2}){4}$/); var validNumber = regex.test(telephone); //Captcha var captcha = $("#age").val(); var nb_caract = captcha.length; var dataString = societe + nom + prenom + adresse + codePostal + ville + email + telephone; var show_message = alert.stop(true, false).fadeIn(300).delay(2000).fadeOut(300); if(dataString == "") { alert.html("Veuillez remplir le formulaire"); show_message; } else if(societe == "") { alert.html("Veuillez indiquer votre société, étude, ..."); show_message; } else if(nom == "") { alert.html("Veuillez indiquer votre nom"); show_message; } else if(prenom == "") { alert.html("Veuillez indiquer votre prénom"); show_message; } else if(adresse == "") { alert.html("Veuillez indiquer votre adresse"); show_message; } else if(codePostal == "") { alert.html("Veuillez indiquer votre code postal"); show_message; } else if(ville == "") { alert.html("Veuillez indiquer votre ville"); show_message; } else if(email == "") { alert.html("Veuillez indiquer votre email"); show_message; } else if(!validEmail) { alert.html("Votre email n'est pas valide !"); show_message; } else if(telephone == "") { alert.html("Veuillez indiquer votre téléphone"); show_message; } else if(client == "") { alert.html("merci de cocher une case"); } else if(!validNumber) { alert.html("Votre numéro de téléphone n'est pas valide !"); show_message; } else if(nb_caract > 0) { alert.html(""); } else { $.ajax({ type : "POST", url: $(this).attr('action'), data: $(this).serialize(), success : function(){ show_message; alert.html("Message envoyé !"); }, error: function(){ show_message; alert.html("Erreur lors de l'envoi !"); } }); } return false; });

x
j'ai penser à ça, mais ça ne me fait rien :

else if(client == $("input[name='client']:not(:checked)")) { alert.html("merci de cocher une case"); }