faire des cases à cocher de se comporter comme des boutons radio

Veuillez voir ceci: http://gisdev.clemson.edu/fireflies

Vers le haut à droite sont trois cases et je suis en train de faire leur travail comme des boutons radio. Une partie de la programmation est un travail, mais voici quelque chose qui est problématique:

D'abord, le " pays de la case est cochée. Et si je devais cliquer sur "Hydrique du Sol Notation de la" case à cocher et puis cliquez de nouveau sur les Comtés case Hydrique case reste cochée. La console n'est pas sortie du tout, ce qui signifie la valeur de checkboxes_controls variable est perdu lorsque le problème se produit.

Voici le code pertinent:

var checkboxescontainer = document.querySelectorAll('.leaflet-control-layers-overlays');
var checkboxes_controls = checkboxescontainer[0].children;

$(checkboxes_controls).each(function() 
{
    console.log($.trim($(this).text()));
    if (eventtype === 'add') 
    {
        if (layername === $.trim($(this).text()))  
        {
            //don't do anything but uncheck all others--making them work like radio buttons
        }
        else 
        {
            $(this).find('input:checkbox').attr('checked', false);
        }
    }   
});

Une idée?

Modifier je vois le problème: en Cliquant sur les Comtés de la couche, la deuxième fois pour sélectionner qui n'est pas encore le feu de la couche 'Ajouter' événement, car je ne suis que l'envoi de l'couches du dos et du devant. Hmmmm.

  • Qu'est-ce que eventtype et layername censé être? Merci de poster votre code (HTML)
  • J'ai posté un "modifier"; voir que. Mon problème est que les couches ne sont pas vraiment être retirés à la première place. Merci.
  • Pourquoi ne pas simplement utiliser les boutons radio? Je dirais à l'aide de cases à cocher boutons radio est mauvaise INTERFACE utilisateur.
  • Taylor: j'aimerais utiliser des boutons radio, mais ne peut pas trouver quoi que ce soit dans Leaflet.js api qui me permettrait d'utiliser les boutons radio pour fonctionner dans mon cas. Merci.
  • Mais votre page a déjà des boutons radio n'est-ce pas?
  • Oui, c'est fait, pour la "base" de la couche de contrôle; et non pas pour le "overlay" contrôles. De toute façon, j'ai uniquement mise à jour de cette page avec une approche légèrement différente: en fait j'ai eu besoin de les cases d'être mutuellement exclusifs, mais, à la différence des boutons radio, toutes les cases nécessaires pour être sélectionnable. La "Réponse" aurait aidé moi sauf que je ne peux pas l'utiliser dans ma page.
  • Double Possible de jQuery: faire des cases à cocher agissent comme des boutons radio?
  • Exemple de travail de cases à cocher utilisés comme des boutons radio ici: jsfiddle.net/54RCF

InformationsquelleAutor IrfanClemson | 2014-05-07
  1. 6

    Le problème essentiel ici est que vous avez besoin de regrouper un ensemble de boîtes et puis si l'une quelconque de l'ensemble est cliqué, itérer sur l'ensemble, en désactivant tous à l'exception de celui qui a été cliqué.

    Vous pouvez de groupe à l'aide d'un nom de classe. Puis donner à chacun un id.

    Lorsque la classe est cliqué, enregistrer le code de l'cliqué sur un. Puis itérer sur les cases à cocher au sein de la classe et désactivez qui ont un id différent de celui que vous avez enregistré off.

    <form action="">
    <input id="cbBike" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Bike" checked>I have a bike<br />
    <input id="cbCar" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Car">I have a car<br />
    <input id="cbBoth" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Both">I have both<br />
    <input id="cbNeither" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Neither">I have neither<br />
</form>


var selectedBox = null;

$(document).ready(function() {
    $(".CB2RBVehicles").click(function() {
        selectedBox = this.id;

        $(".CB2RBVehicles").each(function() {
            if ( this.id == selectedBox )
            {
                this.checked = true;
            }
            else
            {
                this.checked = false;
            };        
        });
    });    
});

    Voici un exemple.

    • Je vous remercie beaucoup. Je suis sûr que votre réponse, comme ci-dessus accepté de Répondre à de chep263 aurait travaillé. Et en fait donc mon code d'origine dans la Question. Le "problème" dans ma Question, c'était que je n'étais pas 'suppression' des couches de la carte et a été simplement de les envoyer en arrière/en avant. Donc, en cochant/décochant n'était pas le déclenchement d'une fonction dans mon code. Mon problème est fixe et peut être vu dans la page. Merci encore!
    InformationsquelleAutor ChicagoJohnnyVegas
  2. 3

    Si vous voulez des cases à cocher pour agir comme des boutons radio, attacher de l'événement onClick d'auditeurs de toutes les cases, supprimer "vérifié" attributs et de les placer sur le seul être cliqué.

    checkboxes_controls = jQuery(document.querySelectorAll('.leaflet-control-layers-overlays input[type=checkbox]'))

jQuery(checkboxes_controls).click(function(){
    jQuery(checkboxes_controls).removeAttr('checked');
    jQuery(this).attr('checked', 'checked');
});
    • Votre réponse fonctionne! Il y avait une modification mineure est nécessaire et elle est sur la page maintenant. Merci beaucoup! C'est une autre question j'ai toujours le problème de couches ne fonctionne pas correctement, mais les cases sont maintenant travailler comme des boutons radio. Merci!
    InformationsquelleAutor chepe263