jquery dynamique sélectionnez le bouton radio (sous forme d'émission de remise à zéro)

Question

Je tente de sélectionner le bouton radio en utilisant dynamiquement

$('#dashboard2 #dbMainPanel #bar2 #ddShowBar').attr('checked', true); 

Mais celui-ci entraînera form.reset() échec. Depuis que j'ai beaucoup de boutons dans la page et je ne l'utilise balise form lorsque je sélectionne

$('#dashboard1 #dbMainPanel #bar1 #ddShowBar').attr('checked', true); 

tous les autres boutons radio se réinitialiser.

Comment éviter cela? et maintenez les boutons radio existants dans la page comme sélectionnés, puis modifiez dynamiquement le bouton actuel.

1. Cliquez d'abord pie dans div1
2. Cliquez ensuite sur bar dans div2

Dans ce scénario, je veux pie dans div1 et bar dans div2 à sélectionner

Fiddle

Fiddle2

Answer 1

Avez-vous essayé d'utiliser .prop()?

$('#ddShowBar').prop('checked', true); 

http://api.jquery.com/prop/

Attributs par rapport Propriétés

La différence entre les attributs et les propriétés peuvent être importantes dans des situations particulières. Avant jQuery 1.6, la méthode .attr() prenait parfois en compte des valeurs de propriété lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. À partir de jQuery 1.6, la méthode .prop() fournit un moyen de récupérer explicitement les valeurs de propriété, tandis que .attr() récupère des attributs. Par exemple, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked et defaultSelected doivent être récupérés et définis avec la méthode .prop(). Avant jQuery 1.6, ces propriétés étaient récupérables avec la méthode .attr(), mais cela ne faisait pas partie de attr. Ceux-ci n'ont pas d'attributs correspondants et ne sont que des propriétés.

Il plus: in your example vous générer de multiples éléments ID et dupliquer attr: nom pour vos groupes de radio.
Chaque nouveau groupe a besoin d'un name différent pour ses radios que ceux du groupe précédent. Facile à faire avec un coutre c variable:

Dans cet exemple, les radios du premier groupe auront des noms: txtradio0; que les radios de groupe suivant: txtradio1 etc ...

Pour maintenir les autres lignes radios que vous cochés avez juste besoin de changer le nom de groupe attributs:

DEMO

var r = ['Pie','Bar','Line','Area','Scatter']; 
var c = 0; // a group counter // set to 1 if you want 

function populateWithRadio(){ 

    var rB = "<div class='radiobuttons'>"; 
    for(var i=0; i< r.length; i++){   // create radios 
     rB += "<input type='radio' class='ddShow"+ r[i] +"' name='txtradio"+ c +"' value='"+r[i]+"'/>"+ r[i] ; 
    } 
    rB += "</div></br></br>"; 

    c++;       // increase Group counter 
    return rB;     // returns the generated HTML to append 
} 


$('#div1').append(populateWithRadio()); 
$('#div2').append(populateWithRadio()); 

$(document).on("click", '.radiobuttons input', function() { 
    alert('CLASS: '+ this.className +'\n NAME: '+ this.name); 
}); 

Answer 2

AFAIK, les radios sont regroupés par la propriété HTML 'name'. Il vous suffit donc de définir un nom unique pour chaque groupe radio, puis une seule radio du groupe peut être sélectionnée simultanément. Sinon (si les radios ne sont pas groupées logiquement), il vaut mieux utiliser la case à cocher.