Ckecklist with angular

Asked

Viewed 26 times

1

I need a help. I want to create a Checklist in which the items are true according to a list that steps to the Selected scope. And this list is updated as I click on the checks. If you click on All the list should be updated with all the items and uncheck passes all to false. Any suggestions? Thanks. 

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>

angularjs

1 answer

0

Here’s a suggestion for you using Jquery only in the case of select all inputs of the checked type. 

$('#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>

I edited the answer to be able to assign the attribute checked if the former is selected and if the latter is not checado, the others won’t be either.

  • Jorge thanks for the tip, but I’m using Angularjs.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.