1

Preciso de uma ajuda. Eu quero criar um checklist em que os itens sejam true de acordo com uma lista que passo para o escopo selected. E essa lista seja atualizada de acordo que eu vá clicando nos checks. Se que clicar em Todos a lista deve ser atualizada com todos os items e desmarcando passa todos para false. Alguma sugestão? Obrigado.

app.controller("TesteController", function ($scope, $http, $window, $location) {

$scope.selected = ['A','C'];


}
<html>
<body>

<div class="row m-t-30px">
      <div class="col-md-12">
           <input type="checkbox" checked> <strong>Check Todos</strong>
      </div>
</div>
<div class="row">

<div class="row"> 
 <div class="col-md-12">
                  <div class="user-perfil">
                     <input type="checkbox" checked> A                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> B                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> C                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> D                                          
                  </div>
 </div>
</div>
</body>
</html>

1 Resposta 1

0

Aqui vai uma sugestão para você usando Jquery apenas para o caso de selecionar todos os inputs do tipo checked.

$('#check-all').change(function(){
  if(this.checked){
     $('input[type="checkbox"]').attr('checked','true');
  }
  else $('input[type="checkbox"]').removeAttr('checked');
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row m-t-30px">
      <div class="col-md-12">
           <input type="checkbox" id="check-all"> <strong>Check Todos</strong>
      </div>
</div>
<div class="row">

<div class="row"> 
 <div class="col-md-12">
                  <div class="user-perfil">
                     <input type="checkbox" > A                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > B                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > C                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > D                                          
                  </div>
 </div>

Editei a resposta para ser possível atribuir o atributo checked caso o primeiro seja selecionado e caso ele não esteja checado, os outros não ficarão também.

1
  • Jorge obrigado pela dica, mas estou usando Angularjs. Commented 16/02/2018 às 17:55

Você deve fazer log-in para responder a esta pergunta.

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