web-dev-qa-db-fra.com

JQuery sélectionne toutes les options de sélection multiple en sélectionnant la case à cocher

C'est mon HTML

<select name="countries" id="countries" MULTIPLE size="8">
   <option value="UK">UK</option>
   <option value="US">US</option>
   <option value="Canada">Canada</option>
   <option value="France">France</option>
   <option value="India">India</option>
   <option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">

Lorsque l'utilisateur clique sur le bouton "Sélectionner tout", je souhaite que toutes les options de la zone de sélection soient sélectionnées

$('#select_all').click( function() {
    // ?
});
javascriptjqueryhtml
65
skos

Essaye ça:

$('#select_all').click(function() {
    $('#countries option').prop('selected', true);
});

Et voici une démo en direct .

165
Darin Dimitrov

Pour les versions jQuery 1.6+, alors

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Ou pour les anciennes versions:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

LIVE DEMO

16
gdoron

essaye ça,

appelez une méthode selectAll () onclick et écrivez une fonction de code comme suit

function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}
4
mathi

Donne l'attribut selected à toutes les options comme celle-ci

$('#countries option').attr('selected', 'selected');

Usage:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

Mise à jour

Si vous utilisez 1.6+, la meilleure option serait d’utiliser .prop() au lieu de .attr()

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});
3
Starx

Si vous utilisez JQuery 1.9+, les réponses ci-dessus ne fonctionneront pas dans Firefox.

Voici donc un code pour la dernière version de jquery qui fonctionnera dans tous les navigateurs.

Voir démonstration en direct

Voici le code

var select_ids = [];
$(document).ready(function(e) {
    $('select#myselect option').each(function(index, element) {
        select_ids.Push($(this).val());
    })
});

function selectAll()
{
    $('select#myselect').val(select_ids);
}

function deSelectAll()
{
    $('select#myselect').val('');
}

J'espère que cela vous aidera... :)

1
Alauddin Ansari

Démo de travail

$('#select_all').click( function() {
    $('select#countries > option').prop('selected', 'selected');
});

Si vous utilisez jQuery plus ancien que 1.6:

$('#select_all').click( function() {
    $('select#countries > option').attr('selected', 'selected');
});
1
Alp

Je suis capable de le faire de manière native @ jsfiddle. J'espère que ça va aider.

Publiez une réponse améliorée quand cela fonctionne et aidez les autres.

$(function () { 

    $(".example").multiselect({
                checkAllText : 'Select All',
            uncheckAllText : 'Deselect All',
            selectedText: function(numChecked, numTotal, checkedItems){
              return numChecked + ' of ' + numTotal + ' checked';
            },
            minWidth: 325
    });
    $(".example").multiselect("checkAll");    

});

http://jsfiddle.net/shivasakthi18/25uvnyra/

0
Sivasakthi Chandrasekaran

essayer

$('#select_all').click( function() {
    $('#countries option').each(function(){
        $(this).attr('selected', 'selected');
    });
});

cela vous donnera plus de place dans le futur pour écrire des choses comme

$('#select_all').click( function() {
    $('#countries option').each(function(){
        if($(this).attr('something') != 'omit parameter')
        {
            $(this).attr('selected', 'selected');
        }
    });
});

En gros, vous permet de sélectionner tous les membres de l'UE ou quelque chose si nécessaire ultérieurement.

0
The Angry Saxon