Alternatives à HTML Refroidir Checkbox

Question

ok non seulement case à cocher, mais aussi le bouton radio. La chose est que j'ai un zillion check-cases & radio-boutons sur ma forme & il semble laid comme l'enfer.

Ce n'est pas un problème de fonctionnalité, mais une question purement interface utilisateur. Je suis à la recherche de façons plus cool d'implémenter la même tâche.

Oh J'utilise jQuery 1.4.3

MISE À JOUR: Je suis arrivé ce jQuery Plugin pour la même chose. C'est génial !! Merci à tous ... Ci-joint la capture d'écran de celui que j'utilise maintenant. Celui-ci m'a plu car, il ressemble un peu à un iPhone mais n'est pas un clone exact.

Answer 1

Wouldn'ta menu déroulant travail pour remplacer plusieurs cases/boutons radio? Vous pouvez activer plusieurs sélections pour répliquer le comportement de la case à cocher. En général, c'est-ce que je ferais si j'avais plus d'une ou deux cases à cocher sur le même sujet ...

Ou voulez-vous dire qu'ils sont des choses distinctes? Dans ce cas, pourriez-vous poster une idée de l'information que vous essayez d'obtenir de l'utilisateur?

Answer 2

Vous pouvez toujours re peau les cases/boutons radio à l'aide de CSS (comme tout autre élément de forme tels que les boutons).

Answer 3

Ceci est une tâche un peu plus avancé que de changer la frontière de modifier des champs. La meilleure méthode serait de cacher la case à cocher/radiobutton et de le remplacer par un élément factice. Le problème avec cette approche est de garder les deux éléments synchronisés. L'image du radiobutton doit savoir quand un autre bouton radio a été vérifié, etc. Ceci nécessite un événement-ping-pong avancé. Vous pouvez le faire comme ceci pour les cases à cocher (non testées):

$(':checkbox').each(function() { 
    var checkbox = $(this), 
     fakebox = $(document.createElement('span')).addClass('custom-checkbox'); 

    // toggle and trigger update of the real checkbox 
    fakebox.click(function() { 
     checkbox.attr('checked', !checkbox.attr('checked')).change(); 
    }); 

    // changes to the real checkbox causes the fake checkbox to update its status 
    checkbox.change(function() { 
     if (checkbox.attr('checked')) { 
     fakebox.addClass('custom-checkbox-checked'); 
     } else { 
     fakebox.removeClass('custom-checkbox-checked'); 
     } 
    }); 

    // initialize 
    checkbox.change().hide(); 
    fakebox.insertAfter(checkbox); 
});