web-dev-qa-db-fra.com

Comment décocher un bouton radio

J'ai deux formulaires, l'un avec un bouton radio que les utilisateurs doivent sélectionner pour le modifier. 

[form name="A"]
<li>[input type="radio" name="BookItem" value="1" /]</li>
<li>[input type="radio" name="BookItem" value="2" /]</li>
<li>[input type="radio" name="BookItem" value="3" /]</li>
[form]<p>

Après que "BookItem" soit sélectionné dans le formulaire (A), j'appelle la fonction $("#EditFormWrapper").load("callEditData.cfm? ID="+ID); pour charger le deuxième formulaire (B). 

<div id="EditFormWrapper"><div></p>
<!---//  begin dynamic form generated by external file callEditData.cfm  //--->
[form id="editForm" name="B"]
<ul class="hourswrapper">
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs1" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs1" /> 2 Hours PM</li>
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs2" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs2" /> 2 Hours PM</li>
</ul>
[input type="image" src="images/submit-btn.gif" id="addBTN" name="addBTN" class="buttons" alt="SubmitRrequest" /]
[input type="image" src="images/cancel-btn.gif" id="editBTNcancel" name="editBTNcancel" class="buttons" alt="Cancel Request" /]
[/form]
<!---//  end dynamic form from external file //--->

Je souhaite désactiver la case d'option du formulaire (A) lorsque l'utilisateur clique sur le bouton d'annulation (editBTNcancel) du formulaire (B). 

Voici mon script:

$("#editBTNcancel").live("click", function(event){
    event.preventDefault();
    $("#EditFormWrapper").slideUp("fast").empty();
    //$('.TOR2Hours').removeAttr('checked');
    $('.TOR2Hours').attr('checked', false);
});

J'espère exprimer clairement mon problème, toute suggestion serait grandement appréciée! 

javascriptjqueryradio-buttondynamic-forms
16
user281867

Je ne sais pas exactement ce que vous voulez, mais vous pouvez utiliser une entrée de réinitialisation.

<input type='reset' />
7
jeremysawesome

vous pouvez accéder au formulaire comme si ... 

var exampleForm = document.forms['form_name'];

puis passez en revue le formulaire

for( var i=0; i<exampleForm.length; i++ ){
   alert( exampleForm[i].type );
}

vous pouvez tester pour vérifié comme si ...

if( exampleForm[i].checked )

pour désélectionner le bouton radio coché, essayez ...

exampleForm[i].checked=false;

le code final ressemblerait à ceci ...

var exampleForm = document.forms['form_name'];
for( var i=0; i<exampleForm.length; i++ ){
   if( exampleForm[i].type ) == 'radio' && exampleForm[i].checked == true ){
       exampleForm[i].checked = false;
   }
}
10
brock

Étant donné que c'est à peu près la tâche DOM la plus simple qui existe et fonctionne dans tous les navigateurs scriptables, je suggère de ne pas utiliser les méthodes jQuery pour cela:

$(".TOR2Hours")[0].checked = false;

L’autre chose qui me préoccupe est de savoir si votre sélecteur est correct. Voulez-vous dire de sélectionner un ensemble d'éléments par classe ou doit-il s'agir d'un sélecteur d'identifiant?

3
Tim Down

J'utilise cette façon de résoudre votre problème en ASP.net, vérifiez ceci ..

radioButton.InputAttributes["show"] = "false"; 
string clickJs = " if(this.show =='true'){this.show ='false'; this.checked = false;}else{this.show='true'; this.checked = true;};";  

radioButton.Attributes["onClick"] = clickJs;

Dans asp.net, vous pouvez utiliser cette méthode pour ajouter un attribut. Et vous pouvez aussi ajouter un attribut manuellement au radioButton, et faire la fonction (clickJs) pour changer les attributs vérifiés !!!

0
Jason SP Lin

Je viens de découvrir une excellente solution à ce problème.

En supposant que vous avez deux radios qui doivent pouvoir être cochées/décochées, implémentez ce code et changez ce qui est nécessaire:

var gift_click = 0;
    function HandleGiftClick() {
        if (document.getElementById('LeftPanelContent_giftDeed2').checked == true) {
            gift_click++;
            memorial_click = 0;
        }
        if (gift_click % 2 == 0) {document.getElementById('LeftPanelContent_giftDeed2').checked = false; }
    }
    var memorial_click = 0;
    function HandleMemorialClick() {          
        if (document.getElementById('LeftPanelContent_memorialDeed2').checked == true) {
            memorial_click++;
            gift_click = 0;
        }
        if (memorial_click % 2 == 0) { document.getElementById('LeftPanelContent_memorialDeed2').checked = false; }
    }

:) vous êtes le bienvenu

0
Jacob Gaiski