Sélectionner tout / Désélectionner tout dans le Bootstrap Sélectionnez plugin

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2">
                <option value="All" selected="selected">All Ratings</option>
                <option value="EC">EC (Early Childhood)</option>
                <option value="E">E (Everyone)</option>
                <option value="E10+">E10+ (Everyone 10+)</option>
                <option value="T">T (Teen)</option>
                <option value="M">M (Mature)</option>
                <option value="AO">AO (Adults Only)</option>
            </select>

Dans le code html ci-dessus il y a l'option avec la valeur All. Je veux sélectionner tous les éléments si cette option est sélectionnée et désélectionner tout si je désélectionner cette option.

Je pense que ça va être simple à faire, mais je ne peux pas comprendre pourquoi il ne se passe rien sur $('#divRatings').change(function(){//some logic});

Ma fonction pour sélectionner/désélectionner les éléments:

  function toggleSelectAll(control) {
    if (control.val().indexOf("All,") > -1) {
        control.selectpicker('selectAll');
    } else {
        control.selectpicker('deselectAll');
    }
}

JSFiddle exemple

OriginalL'auteur demo | 2015-01-23

Problème avec votre javascript est qu'à chaque fois que l'utilisateur clique sur une option à cocher, si "Tous les classements" l'option est toujours activée - vous de vérifier toutes les autres options de trop (même si vous avez juste décoché une option). Et si "Toutes les valeurs" n'est pas cochée, vous décochez toutes les autres options. Donc, en fait, seulement "Toutes les cotes" est cliquable. Si vous cliquez sur n'importe quelle autre option, c'est immédiatement activées ou désactivées à votre onchange gestionnaire.

Essayez ce code:

function toggleSelectAll(control) {
    var allOptionIsSelected = (control.val() || []).indexOf("All") > -1;
    function valuesOf(elements) {
        return $.map(elements, function(element) {
            return element.value;
        });
    }

    if (control.data('allOptionIsSelected') != allOptionIsSelected) {
        //User clicked 'All' option
        if (allOptionIsSelected) {
            //Can't use .selectpicker('selectAll') because multiple "change" events will be triggered
            control.selectpicker('val', valuesOf(control.find('option')));
        } else {
            control.selectpicker('val', []);
        }
    } else {
        //User clicked other option
        if (allOptionIsSelected && control.val().length != control.find('option').length) {
            //All options were selected, user deselected one option
            //=> unselect 'All' option
            control.selectpicker('val', valuesOf(control.find('option:selected[value!=All]')));
            allOptionIsSelected = false;
        } else if (!allOptionIsSelected && control.val().length == control.find('option').length - 1) {
            //Not all options were selected, user selected all options except 'All' option
            //=> select 'All' option too
            control.selectpicker('val', valuesOf(control.find('option')));
            allOptionIsSelected = true;
        }
    }
    control.data('allOptionIsSelected', allOptionIsSelected);
}

$('#divRatings').selectpicker().change(function(){toggleSelectAll($(this));}).trigger('change');

http://jsfiddle.net/bu5vjdk6/4/

Mise à jour du code

http://jsfiddle.net/surajkm33/tsomyckj/

Merci beaucoup, vous avez fait un gros travail pour moi) puis-je supprimer .selectpicker() de la dernière ligne? Je l'ai essayer dans jsFiddle, semble fonctionner. Parce que dans mon projet .selectpicker() non défini, même si la bibliothèque est chargé
Oui, le supprimer. Je l'ai ajouté à assurer".selectpicker () " est appliquée pour sélectionner avant que j'appelle .trigger('change') sur elle (qui est appelé à actualiser, sélectionnez l'état initial).
Pouvez-vous dit ce qui peut provoquer ce problème : TypeError: control.selectpicker is not a function (control.selectpicker('val', []);) Parce que je ne peut pas obtenir ce qu'il est. - Je vérifier si je comprend toutes les bibliothèques comme jquery et bootstrap bootstrap-sélectionnez
Essayez d'envelopper votre code avec $(function() { // code here });. Ou supprimer .trigger de la dernière ligne de mon script.
Wow, très beau!

OriginalL'auteur glyuck

Essayer cette
sélectionnez Tous les

$('#idSelect option').attr("selected","selected");
$('#idSelect').selectpicker('refresh');

Désélectionner Toutes Les

$('#idSelect option').attr("selected",false);
$('#idSelect').selectpicker('refresh');

pour moi, cela a fonctionné.

Je vous remercie, travail parfait

OriginalL'auteur Gleny

Utilisation des données-actions-boîte="true" attribut pour obtenir tout sélectionner ou tout désélectionner l'option. Essayez ce code

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2" data-actions-box="true">
            <option value="All" selected="selected">All Ratings</option>
            <option value="EC">EC (Early Childhood)</option>
            <option value="E">E (Everyone)</option>
            <option value="E10+">E10+ (Everyone 10+)</option>
            <option value="T">T (Teen)</option>
            <option value="M">M (Mature)</option>
            <option value="AO">AO (Adults Only)</option>
        </select>

Veuillez consulter le site [https://silviomoreto.github.io/bootstrap-select/options/%5D%5B1%5D

[1]: https://silviomoreto.github.io/bootstrap-select/options/ Pour en Savoir plus

Espérons que cette aide...

OriginalL'auteur M. K Hossain

$('.selectpicker option[value=All]').click(function(){
    $('.selectpicker option').each(function(){
        this.selected = $('.selectpicker option[value=All]').attr('selected');
    });
});

réponse logique, mais ne fonctionne toujours pas jsfiddle.net/bu5vjdk6/1 Ne sais pas pourquoi

OriginalL'auteur Paulo Segundo

Vous pouvez utiliser mes fonctions :

première modifier votre code

<option value="All" selected="selected">All Ratings</option>

<option value="All" id="target" selected="selected">All Ratings</option>

et deuxième ajouter entre votre <script> tags

$( "#target" ).toggle(function() {
  selectAll($( "#divRatings" ))
}, function() {
  selectClear($( "#divRatings" ))
});

function selectAll(element){//Select All Function
    element.prop('selected', true);
    element.selectpicker('refresh');
}
function selectClear(element){//Clear All Function
    element.prop('selected', false);
    element.selectpicker('refresh');
}

OriginalL'auteur Ferhat KOÇER

Je suis tombé sur cette question alors que la recherche d'une solution rapide pour activer/désactiver l'option tout en un selectpicker <select> et j'ai fini la rédaction de mon propre, one-liner style, qui travaille à la fois sur et en dehors des états:

Donc pour un select#my-select:

HTML

<div>
    <input type="checkbox" id="select_all" data-id-select="my-select">
    <label for="select_all">Toggle all</label>
</div>

JS/jQuery

$('#select_all').on('click', function() {
    $('#' + $(this).data('id-select')).find('option').prop('selected', $(this).is(':checked')).parent('select').selectpicker('refresh');
});

OriginalL'auteur D4V1D

Vous devez vous connecter pour publier un commentaire.