Seleccionar todo / Deseleccionar todo en el complemento Bootstrap Select

Solución:

Utilice el atributo data-actions-box = “true” para seleccionar todas las opciones y anular la selección de todas. Prueba este código

<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>

Por favor visita [https://silviomoreto.github.io/bootstrap-select/options/][1]

[1]: https://silviomoreto.github.io/bootstrap-select/options/ Para saber más

Espero que esto ayude…

Prueba esto, selecciona Todo

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

Deselecciona todo

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

para mi, esto funcionó.

El problema con su javascript es que cada vez que el usuario hace clic en cualquier opción que usted marque, si la opción “Todas las calificaciones” todavía está marcada, usted también marca todas las demás opciones (incluso si acaba de desmarcar cualquier opción). Y si “Todas las calificaciones” está desmarcada, desmarca todas las demás opciones. Entonces, de hecho, solo se puede hacer clic en la opción “Todas las calificaciones”. Si hace clic en cualquier otra opción, se marcará / desmarcará inmediatamente en su onchange manipulador.

Prueba este código:

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/

Código actualizado

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

---

---

Utiliza Nuestro Buscador