Como desmarcar todas as opções de uma multiseleção no JQuery

Escrito por sara williams | Traduzido por milene hermenegildo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como desmarcar todas as opções de uma multiseleção no JQuery
Desmarque todas as opções de uma multiseleção no JQuery (typing on a computer keyboard image by TEMISTOCLE LUCARELLI from Fotolia.com)

As caixas de multiseleção são feitas com quase o mesmo código de caixas suspensas de seleção, sendo a única diferença a adição de um atributo "multiple" (múltiplo). O elemento de formulário criado por este código é uma caixa que você pode rolar e selecionar várias opções. Você pode criar um botão que desmarque todas as opções em uma caixa de seleção múltipla no jQuery. O seletor "option:selected" irá encontrar todas as opções selecionadas e adicionar "removeAttr('selected')" a ele irá desmarcá-las.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra sua página em um editor e verifique a referência para a biblioteca jQuery, encontrada dentro das marcações "<script>", no cabeçalho ou rodapé do código. Adicione a referência se você não encontrar uma e, em seguida, adicione duas marcações "<script>" abaixo dela, para conter o script que você vai escrever:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type=”text/javascript”> </script>

  2. 2

    Inicie o script com uma função para verificar se a página já terminou de carregar. Usar esta função irá ajudá-lo a evitar erros. No jQuery, você pode usar uma versão abreviada da função "document ready" (documento pronto):

    <script type=”text/javascript”> $(function () { }); </script>

    Escreva o restante do seu script dentro das chaves da função.

  3. 3

    Encontre o nome do ID do botão "Submit" (Enviar) no seu HTML:

    <input type=”submit” value=”Limpar Caixa” id=”limpar” />

    Neste exemplo, o nome do ID é "limpar".

  4. 4

    Selecione o botão "Submit" (Enviar) pelo seu ID e acrescente a função "click()" para acionar um evento de clique:

    $(“#clear”).click(function () { });

  5. 5

    Adicione esta linha de código dentro da função "click()":

    $(“option:selected”).removeAttr(“selected”);

    Este código só funciona em caixas de multiseleção criadas pela marcação "<select>". O seletor “$(“option:selected”)” procura qualquer opção marcada na multiseleção e usa "removeAttr()" para remover todas as instâncias do atributo "selected" (selecionado) da marcação "<option>" na página.

  6. 6

    Adicione "return false" ao fim de sua função "click()" para impedir que o botão "Submit" (Enviar) envie o usuário para uma nova página ou tente enviar quaisquer dados. Seu código final será parecido com este:

    $(function() { $(“#clear”).click(function () { $(“option:selected”).removeAttr(“selected”); return false; }); });

Dicas & Advertências

  • Altere todas as ocorrências de "selected" (selecionado) para "checked" (marcado) no script e remova "option” (opção) do código do seletor para usar este script para caixas de seleção em vez de uma caixa de multiseleção.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível