-2

Tenho várias checkboxes num formulário, que serão marcadas pelo usuário. Caso o mesmo deseje, poderá limpar todas ao clicar num botão, conforme imagem abaixo: checkboxes

tentei utilizar esta função em javascript:

function myFunctionClear() {
  for (i = 0; i < document.selecao.elements.length; i++)
    if (document.selecao.elements[i].type == "checkbox")
      document.selecao.elements[i].checked = 0
}

no meu botão

<button class='btn  custom' onclick="myFunctionClear()">Limpar Seleção</button>

mas por algum motivo não está funcionando. a outra resposta do StackOverflow que encontrei (Marcar/Desmarcar Checkbox a partir de um botão) mostra um botão que marca e demarca todas as checkboxes, porém não gostaria de usar jquery. link para o jsfidlle: https://jsfiddle.net/elenderg/tdvqp4xL/

2
  • 7
    Marcar/Desmarcar Checkbox a partir de um botão
    – rray
    Commented 22/02/2016 às 19:25
  • 1
    Importante você editar sua pergunta fornecendo um Exemplo Mínimo, Completo e Verificável do problema, explicar como tentou resolver e descrever o mais objetivamente possível qual foi a dificuldade encontrada. Ao editar, automaticamente sua pergunta é destacada para uma revisão e a comunidade reavalia os votos e o fechamento. Queira consultar a central de ajuda e respectivos links para um melhor entendimento da finalidade das perguntas e respostas do site.
    – Largato
    Commented 16/06 às 3:01

2 Respostas 2

2

Você deve remover o atributo checked

function myFunctionClear() {
  for (i = 0; i < document.selecao.elements.length; i++)
    if (document.f1.elements[i].type == "checkbox")
      document.f1.elements[i].removeAttribute("checked");
}

Ou marcá-lo como false

function myFunctionClear() {
  for (i = 0; i < document.selecao.elements.length; i++)
    if (document.f1.elements[i].type == "checkbox")
      document.f1.elements[i].checked = false;
}

UPDATE

Eu assumi que document.f1 representasse a tag <form> que possui os checkboxes a serem desmarcados. O código abaixo é baseado no exemplo https://jsfiddle.net/elenderg/tdvqp4xL/

Primeiro: Substitua o formulário que você inseriu dentro de outro formulário

    <form action="form_action.asp">
      <form name="selecao">

por:

    <form action="form_action.asp" name="selecao">

Segundo: Reescreva a função myFunctionClear

function myFunctionClear() {
  for (i = 0; i < document.forms.selecao.elements.length; i++)
    if (document.forms.selecao.elements[i].type == "checkbox")
      document.forms.selecao.elements[i].checked = false;
}
2
0

Existe um jeito mais simples, e mais performático de fazer isso sem utilizar um for para desmarcar esses campos selecionados. Da uma olhada:

function myFunctionClear() {
  var inputs = $('input[type=checkbox]');

  inputs.attr('checked', false);
  inputs.prop('checked', false);
}
2
  • Essa solução funciona mas acho que é expansiva demais uma vez que captura todos os checkboxes da página. A linha inputs.prop('checked', false); não produz efeito nesse contexto e poderia ser removida.
    – user21448
    Commented 22/02/2016 às 21:28
  • Entendo seu ponto, e você realmente está certo. Mas já utilizei essa solução em uma aplicação que atendia perfeitamente o requisito... Ai acho que vai mais da necessidade mesmo. A linha inputs.prop('checked', false); eu adicionei só como garantia, acredito que se a função for chamada duas vezes, a segunda não se comportaria como o esperado sem essa linha, mas vale o teste :) Commented 23/02/2016 às 13:41

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .