Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia. Estou utilizando Semantic-UI em meus campos de multiseleção, porém o Semantic-UI não oferece uma opção de marcar/desmarcar todas as opções. Como eu poderia fazer?
Html
<select class="form-control dropdown" name="uf[]" multiple="" id="uf"> <!-- campos das UF -->
<option value="0"> 0 </option>
<option value="SC"> SC </option>
<option value="RS"> RS </option>
<option value="PR"> PR </option>
</select>
JS$('.dropdown').dropdown({
useLabels: false
});
Concordo com o gabrieldarezzo.
>
6 minutos atrás, gabrieldarezzo disse:
Não faz muito sentido ao meu ver usar Selects para campos que deveriam ser 'CheckBox',
Acredito que um campo de UF deva ser de seleção com um Select, não com um 'CheckBox'..
>
8 minutos atrás, gabrieldarezzo disse:
Segue um exemplo que encontrei simplesmete buscando os termos no Google:
**semantic-ui select all in multiple select**
[http://codepen.io/monty5811/pen/xVgrzB](http://codepen.io/monty5811/pen/xVgrzB)
Eu já havia buscado no Google, e se você chegou a testar, esse exemplo não funciona com os fonts que está na pagina.>
4 minutos atrás, quimera disse:
Concordo com o gabrieldarezzo.
Bom comentário.
Estou tentando fazer assim, mas só seleciona na primeira vez.
<ul class="chk-container">
<li><input type="checkbox" id="selecctall"/> Selecionar todos</li>
</ul>
<select multiple="">
<option class="sel">1</option>
<option class="sel">2</option>
<option class="sel">3</option>
</select>
<script>
$(document).ready(function() {
$('#selecctall').click(function(event) {
if(this.select){
$('.sel').each(function() {
this.selected = true;
});
}else{
$('.sel').each(function() {
this.selected = false;
});
}
});
});
</script>
Peguei esse exemplo de um caso onde selecionava vários checkbox..>
1 hora atrás, Luiz Gustavo Costa Ceolin disse:
e se você chegou a testa
Não, nem cheguei a testar...
Mas te mandei 2 links.
Deduzi que você tentando resolver o seu problema testaria ambas antes de partir pro jQuery ignorando o plugin que escolheu...
Falando nisso da uma lida:
https://semantic-ui.com/modules/dropdown.html#/settings
>
1 hora atrás, gabrieldarezzo disse:
Ou tenta esse cara:
$('.ui.fluid.dropdown').dropdown('set select
Engraçado q eu testei e funcionou lindamente:
Olha o código completo:<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" />
</head>
<body>
<select class="form-control dropdown" name="uf[]" multiple="" id="uf"> <!-- campos das UF -->
<option value="0"> 0 </option>
<option value="SC"> SC </option>
<option value="RS"> RS </option>
<option value="PR"> PR </option>
</select>
<hr />
<button id="btn-select-all">Selecionar Todos</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js" type="text/javascript"></script>
<script type="text/javascript">
$('.dropdown').dropdown({
useLabels: false
});
$( "#btn-select-all" ).bind( "click", function() {
$('.dropdown').dropdown('set selected',['SC','RS','PR']);
});
</script>
</body>
</html>
Um demo online:
[https://fiddle.jshell.net/76g6e6dg/](https://fiddle.jshell.net/76g6e6dg/)Um adendo...
Fica melhor assim:
<option value="">Selecione um ou mais</option>
Pois ele n deixa selecionar campos com value="", ficando como um 'placeholder'.gabrieldarezzo chegaste a perceber que dá um probleminha se o usuário selecionar um ou alguns e depois tentar selecionar ou tirar toda a seleção? tipo tem três opções se selecionar uma e depois resolver selecionar tudo vai selecionar duas e ficar uma de fora. se clicar de novo inverte para uma selecionada e duas de fora ou seja inverte o que tiver no momento invés de selecionar tudo ou tirar toda a seleção. só funciona assim se tiver tudo selecionado ou tudo sem selecionar. chegaste a ver isso?
Boa sacada não tinha visto não.
Alguma ideia de como resolver?
Autor do post?
@marsolim
@Ezequiel (kkkk)
Resolvido,
>
2 horas atrás, Luiz Gustavo Costa Ceolin disse:
>
2 horas atrás, gabrieldarezzo disse:
Segue um exemplo que encontrei simplesmete buscando os termos no Google:
**semantic-ui select all in multiple select**
[http://codepen.io/monty5811/pen/xVgrzB](http://codepen.io/monty5811/pen/xVgrzB)
Eu já havia buscado no Google, e se você chegou a testar, esse exemplo não funciona com os fonts que está na pagina
O problema de não estar funcionando é que nesse código ele insere mais um javascript no head que não vem junto com os da bibliotéca do Semantic-UI.
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>Ai sim
Eu não to acostumado ainda com essa marcação:
const options = $('#members_dropdown > option').toArray().map(
(obj) => obj.value
);
$('#members_dropdown').dropdown('set exactly', options);
Mas não se distancia muito da minha.
Ainda acho zoado a biblioteca não ter um .setAllChecked() .setAllUnchecked() da vida...
Vai entender...
Não faz muito sentido ao meu ver usar Selects para campos que deveriam ser 'CheckBox',
enfim:
Segue um exemplo que encontrei simplesmete buscando os termos no Google: